Текст на изображениях

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

Вариант 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 основы. Добавьте в закладки постоянную ссылку.

9 комментариев на «Текст на изображениях»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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