Появление картинки при клике на ссылку

Привет, всем. Сегодня предложу вам код, когда при наведении на ссылку появляется картинка. Вариантов оформления ссылок достаточно много. Но этот будет оригинальным решением для тематических блогов. Или же для оформления отдельного сообщения. Картинку всегда можно подобрать под нужную тематику и дизайн.

Живую демонстрацию вы можете увидеть сразу ниже. Ссылки я дала на  некоторые страницы своего блога для наглядности. Вы, конечно, поменяете их на адреса своих страниц. Картинки и текст - соответственно.

Дорогие читатели "Здесь ссылка", Поздравляю вас с наступающим 2020 годом Здесь тоже ссылка. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом Здесь тоже ссылка' Принесет в делах согласье, В личной жизни — много счастья!."

Вот сам код.

<div class="wrapper tabled">
<div class="stage">
<div class="middled">
Дорогие читатели <a class="boo" href="http://www.shpargalochki.ru/">"текст ссылки"</a>, Поздравляю вас с наступающим 2020 годом<a class="boo" href="http://www.shpargalochki.ru/2019/12/podborka-variantov-oformleniya-bloga-na-novyj-god.html">текст ссылки</a>. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом <a class="boo" href="http://www.shpargalochki.ru/p/blog-page_1.html">текст ссылки</a> Принесет в делах согласье, В личной жизни — много счастья!."</div>
</div>
</div>

<style>
.stage {
  display: table-cell;
  vertical-align: middle;
}
 .tabled, .middled {
  text-align: center;
  margin: 0 auto;
}
 .jumbo {
  font-size: 150%;
  vertical-align: -25px;
  transform: rotate(8deg);
}
 .jumbo:first-child {
  -webkit-animation: wave 10s infinite ease;
          animation: wave 10s infinite ease;
}
.jumbo:last-child {
  -webkit-animation: wave 15s infinite ease;
          animation: wave 15s infinite ease;
}
 @keyframes wave {
  0% { transform: rotate(8deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(8deg); }
} @-webkit-keyframes wave {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(10deg); }
  100% { -webkit-transform: rotate(0deg); }
}
 p {
  font-size: 110%;
  font-family: Helvetica, sans;
  max-width: 24em;
  margin: 0 auto;
  text-align: justify;
  color: #00695C;
  font-weight: lighter;
  line-height: 1.5em;
}
 a {
  color: #ccc;
  text-decoration: none;
  border-bottom: solid thin #f7901d;
}
 a:hover {
  color: #f7901d;
}
 .boo {
  position: relative;
}
.boo:before, .boo:after {
  position: absolute;
  transition: all 0.15s ease;
}
 .boo:before {
  top: -75px;
  left: -70px;
  -webkit-transform:rotate(0deg) scale(0);
     -moz-transform:rotate(0deg) scale(0);
       -o-transform:rotate(0deg) scale(0);
      -ms-transform:rotate(0deg) scale(0);
          transform:rotate(0deg) scale(0);
}
 .boo:after {
  top: -115px;
  right: -70px;
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
  -webkit-transform:rotateY(180deg) scale(0);
     -moz-transform:rotateY(180deg) scale(0);
       -o-transform:rotateY(180deg) scale(0);
      -ms-transform:rotateY(180deg) scale(0);
          transform:rotateY(180deg) scale(0);
}
 .boo:hover:before {
  top: -140px;
  -webkit-transform:rotate(15deg) scale(1);
     -moz-transform:rotate(15deg) scale(1);
       -o-transform:rotate(15deg) scale(1);
      -ms-transform:rotate(15deg) scale(1);
          transform:rotate(15deg) scale(1);
}
 .boo:hover:after {
  -webkit-transform:rotateY(180deg) scale(0.7);
     -moz-transform:rotateY(180deg) scale(0.7);
       -o-transform:rotateY(180deg) scale(0.7);
      -ms-transform:rotateY(180deg) scale(0.7);
          transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after {
  content: url('ссылка на картинку . png');
}
</style>

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

<a class="boo" href="http://www.shpargalochki.ru/">"текст ссылки"</a>)

Не думаю, что такое оформление ссылки нужно использовать сплошь и рядом. Но для некоторых случаев вполне приемлемо.

А мне от всего сердца хочется вам всем пожелать самого счастливого Нового года. Улыбок, радости, здоровья, благополучия родным и близким. Добра и мира Вашему дому!!!

С НАСТУПАЮЩИМ, ВСЕХ, НОВЫМ 2020 ГОДОМ!!!