Как сделать текст на картинке css

Текст на изображениях, примеры и готовый код

Пять оригинальных эффектов появления текста на изображениях, при наведении курсора.

Текст появляется из глубины изображения.

Текст появляется из глубины изображения, вращаясь.

Текст вытягивается с краёв изображения.

Этот вариант отличается от предыдущих тем, что выплывающий текст вносится не в ссылку, а в блок, в который заключена ссылка.

Размещается текст в пользовательских атрибутах data.

В этом варианте помимо описания выводится и заголовок картинки.

.lake:before <
display : block ;
background-color : rgb(0, 0, 0) ;
content : "" ;
height : 100% ;
opacity : 0 ;
position : absolute ;
width : 100% ;
z-index : 2 ;
>

.lake:after <
font-family : ‘Lucida Console’ ;
color : white ;
content : attr(alt) ;
display : block ;
font-size : 16px ;
opacity : 0 ;
padding : 0 3% ;
position : absolute ;
text-transform : none ;
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ;
-webkit-transform : scale(0) translateY(-50%) ;
transform : scale(0) translateY(-50%) ;
width : 94% ;
z-index : 3 ;
>

.lake img <
border : none ;
display : block ;
z-index : 1 ;
>

.lake:after <
-webkit-transition : all 350ms ease-in-out ;
transition : all 350ms ease-in-out ;
>

.lake:hover:before <
opacity : 0.6 ;
>

.lake:hover:after <
opacity : 1 ;
-webkit-transform : scale(1) translateY(-50%) ;
transform : scale(1) translateY(-50%) ;
>

< /style >
< /head >
< body >
< a class color: #008080;">lake " href color: #008080;"># " title ="" alt color: #008080;">Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. ">< img src color: #008080;">images/45.jpg " alt="">< /a >
< /body >
< /html >

.lake:before <
display : block ;
background-color : rgb(0, 0, 0) ;
content : "" ;
height : 100% ;
opacity : 0 ;
position : absolute ;
width : 100% ;
z-index : 2 ;
>

.lake:after <
font-family : ‘Lucida Console’ ;
color : white ;
content : attr(alt) ;
display : block ;
font-size : 16px ;
opacity : 0 ;
padding : 0 3% ;
position : absolute ;
text-transform : none ;
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ;
-webkit-transform : scale(0) translateY(-50%) ;
transform : scale(0) translateY(-50%) ;
width : 94% ;
z-index : 3 ;
>

.lake img <
border : none ;
display : block ;
z-index : 1 ;
>

.lake:after <
-webkit-transition : all 350ms ease-in-out ;
transition : all 350ms ease-in-out ;
>

.lake:hover:before <
opacity : 0.6 ;
>

.lake:hover:after <
opacity : 1 ;
-webkit-transform : scale(1) translateY(-50%) ;
transform : scale(1) translateY(-50%) ;
>

.lake:after <
-webkit-transform : scale(0) rotate(-360deg) translateY(-50%) ;
transform : scale(0) rotate(-360deg) translateY(-50%) ;
>

.lake:hover:after <
-webkit-transform : scale(1) rotate(0deg) translateY(-50%) ;
transform : scale(1) rotate(0deg) translateY(-50%) ;
>
< /style >
< /head >
< body >
< a class color: #008080;">lake " href color: #008080;"># " title ="" alt color: #008080;">Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. ">< img src color: #008080;">images/45.jpg " alt="">< /a >
< /body >
< /html >

@keyframes appearing <
0% <
transform : scaleX(4) scaleY(0) translateY(-50%) ;
>
50% <
transform : scaleX(4) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 0) ;
>
100% <
transform : scaleX(1) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 1) ;
>
>

@-webkit-keyframes disappearing <
0% <
-webkit-transform : scaleX(1) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 1) ;
>
50% <
-webkit-transform : scaleX(4) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 0) ;
>
100% <
-webkit-transform : scaleX(4) scaleY(0) translateY(-50%) ;
>
>

@keyframes disappearing <
0% <
transform : scaleX(1) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 1) ;
>
50% <
transform : scaleX(4) scaleY(1) translateY(-50%) ;
color : rgba(255, 255, 255, 0) ;
>
100% <
transform : scaleX(4) scaleY(0) translateY(-50%) ;
>
>

@-webkit-keyframes positioning <
0% <
z-index : 10 ;
>
99% <
z-index : 10 ;
>
100% <
z-index : 1 ;
>
>

@keyframes positioning <
0% <
z-index : 10 ;
>
99% <
z-index : 10 ;
>
100% <
z-index : 1 ;
>
>

.lake <
display : inline-block ;
overflow : hidden ;
position : relative ;
text-align : center ;
text-decoration : none ;
>

.lake:before <
-webkit-animation : disappearing 500ms ease-in-out forwards ;
animation : disappearing 500ms ease-in-out forwards ;
background-color : rgba(0, 0, 0, 0.6) ;
color : rgba(255, 255, 255, 0) ;
content : attr(alt) ;
display : block ;
font-family : ‘Lucida Console’ ;
font-size : 16px ;
padding : 5% 2% ;
position : absolute ;
text-transform : none ;
top : 50% ;
-webkit-transform-origin : 50% 0% ;
transform-origin : 50% 0% ;
width : 96% ;
z-index : 5 ;
>

.lake img <
-webkit-animation : positioning 510ms ease-in-out forwards ;
animation : positioning 510ms ease-in-out forwards ;
border : none ;
display : block ;
position : relative ;
z-index : 10 ;
>

.lake:after <
opacity : 0 ;
background-color : white ;
content : "" ;
display : block ;
height : 100% ;
position : absolute ;
top : 0 ;
width : 100% ;
z-index : 15 ;
>

.lake:hover:before <
-webkit-animation : appearing 500ms ease-in-out forwards ;
animation : appearing 500ms ease-in-out forwards ;
>

< /style >
< /head >
< body >
< a class color: #008080;">lake " href color: #008080;"># " title ="" alt color: #008080;">Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь. ">< img src color: #008080;">images/45.jpg " alt="">< /a >
< /body >
< /html >

На страницы блога на WordPress, изображение вставляется через загрузчик.

Затем, в первых трёх случаях тегу <а> задаётся класс, после чего в файл style.css вносятся стили этого класса.

В четвёртом примере изображение так же загружается через загрузчик, после чего заключается в блок div.

В пятом &#8212; картинка загружается в папку images шаблона.

Стили так же вносятся в style.css.

Желаю творческих успехов.


Перемена

Три пути ведут к знанию: путь размышления &#8212; это путь самый благородный, путь подражания &#8212; это самый легкий, и путь опыта &#8212; это самый горький. Конфуций.

Подписи для картинок на HTML и CSS

В вёрстке часто приходится работать с картинками. Не в контексте создания с их помощью оформления, а именно картинками как картинками. И дизайнеры иногда очень любят придумывать различные способы оформления подписей к картинкам, вёрстка которых может вызвать затруднения у начинающих. В этой заметке я постараюсь раскрыть один из способов вёрстки подписей для изображений.

Итак, мы хотим увидеть результат примерно как на рисунке 1.

img-title

Рисунок 1. Исходная картинка

Для этого нам понадобиться написать вот такой html-код:

Пока всё просто: оборачиваем картинку в блок, ниже картинки внутри span вписываем подпись для неё. Сам приём основан на добавлении к элементу, содержащему подпись (в данном случае — к span), абсолютного позиционирования и расположения внизу, что позволит тексту в нём растягивать элемент не вниз, а вверх. Но чтобы все элементы вели себя правильно, нужно будет прописать некоторые стили и для картинки, и для блока-обёртки. Итак, по порядку.

Так как span у нас будет абсолютным, к обёртке нужно добавить position: relative, а также указать ширину.

Картинку следует принудительно сделать блочной, чтобы убрать ненужные нам отступы снизу и удалить рамку в IE.

Но больше всего стилей мы пропишем для span:

  • мы делаем его блоком
  • задаём padding чтобы текст не прилипал к краям
  • задаём принудительную ширину (не забудьте уменьшить её на ширину padding’a)
  • делаем абсолютное позиционирование и «приклеиваем» к низу блока-обёртки, который является визуально и самым низом картинки
  • далее задаём цвет фона, его прозрачность (согласно статье 12 простых и полезных приёмов ), оформляем текст подписи по вкусу

Таким образом, самое главное — это первые пять свойств. Остальное оформление вы можете изменить как угодно на ваше усмотрение. В итоге получилась такая страничка:

Обратите внимание Ширины блока-обёртки, картинки и блока с названием с учётом padding должны быть равными!

Варианты наложения текста на изображение

3 примера наложения текста на картинку без потери его читаемости.

Варианты наложения текста на изображение

На самом деле таких вариантов намного больше. Для читаемости можно размещать тексты в определенных местах фотографии или редактировать ее. Но в этой заметке рассмотрим только универсальные решения, которые подойдут под любой текст, под любое изображение и под любой размер экрана.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *