Растягивающийся текст при наведении картинки Blogger

Здравствуйте, друзья. Растягивающееся описание у картинки является одним из элементом современного дизайна веб - страницы. Вариантов такого оформления изображений с описанием достаточно много

и у меня есть уже несколько сообщений на эту тему. Если вам интересно, то посоветую прочитать об этом здесь и здесь.

Вообще, CSS-анимация придаёт сайтам динамичность и оживляет веб-страницы
Вариант раздвигающегося описания при наведении курсора на картинку, очень оригинален.

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

Когда пользователь наводит курсор мыши на изображение, первая анимация растягивает текст по вертикали, чтобы он был видимым. Данная анимация изменяет значение функции scaleY на 1. После завершения первой анимации, начинает выполняться вторая: она как бы зжимает блок до исходных размеров, изменяя значение функции scaleX на 1 и, одновременно делает текст непрозрачным.

Чтобы увидеть как это выглядит, скопируйте предложенный ниже код, и установите его в редакторе на  этой странице. Ниже разберём, как это реализовать в Блоггере.

<a href="http://www.shpargalochki.ru" title="Аму́рский тигр самый северный тигр. Занесён в Красную книгу.."><img alt="" src="http://simple-fauna.ru/wp-content/uploads/2015/04/amurskiy-tigr-4.jpg" height="360" width="430" /></a>

<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; }
}

a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
}

a: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(title);
  display: block;
  font-family: Tahoma;
  font-size: 20px;
  font-weight: bold;
  padding: 5% 2%;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  width: 96%;
  z-index: 5;
}

a 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;
}

a:after {
  opacity: 0;
  background-color: white;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 15;
}

a:hover:before {
  -webkit-animation: appearing 500ms ease-in-out forwards;
  animation: appearing 500ms ease-in-out forwards;
}</style>

Собственно, нам нужно только любое изображение - его URL адрес. Синим - адрес страницы, куда пользователь переходит по картинке. height="360" width="430 - высота и ширина самого изображения.

Вот и всё. При написании сообщения перейдите в режим HTML и в нужном месте вставляйте готовый код. Красивое описание у картинки вы сможете увидеть после публикации сообщения.

Всем удачи и до новых встреч.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email