Эффектное увеличение картинки с всплывающим описанием

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

Здесь просто картинка, а результат в действии можно посмотреть здесь в редакторе. Просто скопируйте код и установите его в поле редактора. 

<style>
.test{
  text-align:center;
  
  margin-bottom: 1.3em;
}
#figure-hover{
  display:inline-block;
  font-size: 18px;
  color: #222;
  margin-bottom: 40px; 
  margin-top: 40px;
  transition: 0.8s;
}
#figure-hover img{
  border: 3px solid #666;
  box-shadow: 0px 0px 20px 0px #000;
  margin-bottom: 15px;
}
#figure-hover figcaption {
  opacity: 0;
  text-align:center;
  transition: opacity 0.8s;  
}
#figure-hover a {
  text-decoration-style: dotted;
  color: inherit;
}
#figure-hover:hover {
transform:scale(1.15);
}
#figure-hover:hover figcaption{
opacity : 1;
}
</style>
  <div class="test">
    <figure id="figure-hover">
       <img src="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg" alt=" попугаи">
      <figcaption>
        Самые красивые попугаи на Земле <a href="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg"></a>  
      </figcaption>
    </figure>
  </div>

Обращу ваше внимание на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure, допустим, на figure 1. 

Такой эффект можно применить ко всем изображениям. Нужно установить код  CSS в шаблоне блога, но без тегов <style> и </style>.  Делаем так. Вкладка Тема - изменить HTML- найти строку ]]></b:skin> и над ней устанавливаем этот код CSS.

Потом, при написании поста, в том месте, где нужна картинка с эффектом увеличения и описания, ставим, перейдя в режим HTML, этот участок (разметку)

<div class="test">
    <figure id="figure-hover">
       <img src="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg" alt=" попугаи">
      <figcaption>
        Самые красивые попугаи на Земле <a href="https://images.agromassidayu.com/img/novosti-i-obshestvo/7/popugaj-yarkaya-ekzoticheskaya-ptica-skolko-vidov-popugaev-sushestvuet-v-mire.jpg"></a>  
      </figcaption>
    </figure>
  </div>

 

Соответственно замените на свои адреса картинок и описание. 

При редком использовании эффекта весь код, который предложен выше копируем и вставляем, опять же в редакторе в формате HTML.

Очень эффектно смотрятся картинки с при применении этого кода. 

Всем добра, увидимся.