Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

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

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

Вариант 1

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

Код

Вариант 2

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

Код

Вариант 3

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

Код

Вариант 4.

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

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

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

Код

Вариант 5

Эффект 3D

Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут.

Код

Код 1:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
}

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

Код 2:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
text-align: center;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
}

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

Код 3:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
@-webkit-keyframes appearing {
0%{
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
-webkit-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);
}
}

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

Код 4:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
display: inline-block;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #000;
}
.lac {
display: block;
max-width: 100%;
transition: opacity .2s ease-in-out;
}
.lake:after,
.lake:before
{
box-sizing: border-box;
position: absolute;
width: 100%;
padding: 20px;
color: #fff;
transition: transform .4s ease-out;
}
.lake:after {
content: attr(data-title);
top: 0;
height: 20%;
background: rgba(0,0,0,.4);
font-size: 2rem;
font-weight: 300;
text-align: center;
transform: translateY(-100%) scale(.8);
}
.lake:before {
content: attr(data-description) "…";
top: 20%;
height: 80%;
background: rgba(107,38,68,.6);
font-size: 1.1rem;
transform: translateY(100%) scale(.8);
}
.lake:hover:after,
.lake:hover:before
{
transform: translateY(0%) scale(1);
}
</style>
</head>
<body>
<div class="lake"
data-title="Серебряное озеро"
data-description="Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут, по происхождению — междюнное. На озере возможен только неорганизованный отдых. Оборудованы туристические стоянки. Ихтиофауна: окунь, линь, щука, верховка, пескарь.">
<img class="lac" src="images/131.jpg" alt="" width="400" height="300">
</div>
</body>
</html>

Код 5:


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.lake {
width: 640px;
height: 420px;
margin: 70px auto;
perspective: 1000px;
}
.lake .efekt {
display: block;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(images/0.jpg); /* Картинка */
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.lake:hover .efekt {
transform: rotateX(80deg);
transform-origin: bottom;
}
.lake .efekt:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 65px; /* Размер поля с текстом */
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.lake .efekt .descriptions {
color: white;
position: absolute;
top: 100%;
left: 0;
width: 100%;
text-align: center;
font-size: 18px; /* Размер текста */
transform: rotateX(-89.99deg);
transform-origin: top;
z-index: 1;
</style>
</head>
<body>
<div class="lake">
<div class="efekt">
<span class="descriptions">Серебряное — озеро в Звениговском районе, Марий Эл, Россия. Находится на территории Суслонгерского военного лесхоза. Озеро расположено в бассейне реки Юшут.

</div>
</div>
</body>
</html>

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

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

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

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

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

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


Перемена

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

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

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

  1. Юлия говорит:

    Спасибо, простое и удобное решение. Заменила им сторонний сервис.

  2. stariс говорит:

    Вот Юра. Специально для тебя ещё пару эффектов добавил. 4 и 5. В них можно ссылку вставлять.

  3. stariс говорит:

    Здорово Юрий Николаевич! Спасибо за подсказку. А ссылка в ссылке наверно не получится. Другой тег для текста тоже не получается.

  4. Юрий говорит:

    А как придумать, чтобы в тексте можно ссылку вставить ?

  5. Юрий говорит:

    Нашел ! В стилях .lakeo:after {
    content: attr(alt);/* а там title */
    }
    Может кому то пригодится.

  6. Юрий говорит:

    Доброй ночи! Попробовал, но что то не работает((((

  7. stariс говорит:

    Подсказку выводит браузер. Не знаю как ему можно запретить её выводить. Скорее всего есть способ, но …..

  8. Влад говорит:

    А нельзя ли вообще убрать выплывающее окно подсказок?

  9. stariс говорит:

    Тут нужно копать в настройках шаблона. Я ведь сперва тоже в title сделал, и очень долго юзал, как бы эту всплывалку-подсказку убрать. Ничё не нашёл. А потом попробовал переделать на alt, и сработало. Почему — пока сам не разобрался.

  10. Максим говорит:

    У меня работает только если вставить текст в атрибут title, но тогда вылазит окошко с описанием. Если скопировать код в примере, то текст не выводится. Посмотрел код этой страницы, там у Вас атрибут title alt=»…». Но так тоже не работает.

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

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