Текст появляющийся на изображениях CSS

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

Вариант 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>

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

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

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


Перекур

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

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

8 комментариев на «Текст появляющийся на изображениях CSS»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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