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

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

картинка при клике ссылки


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

Дорогие читатели "Здесь ссылка", Поздравляю вас с наступающим 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 ГОДОМ!!!

8 комментариев:

  1. Как всегда, полюбопытствовал. Очень симпатичная затея!

    ОтветитьУдалить
    Ответы
    1. Семён, ну как - то так. Пригодится.

      Удалить
  2. Ой прелесть какая! Прикольная штучка выделить объявление.Спасибо Викуля!Поставила в боковушку.
    https://www.manyofis.site

    ОтветитьУдалить
  3. Монетка, Ты уже поставила!!! Какая молодец. Сбегала

    ОтветитьУдалить
  4. Очень классная идея! буду разбираться, для меня, конечно, сложно. Но ничего невозможно нет? Вика, а куда саму картинку выкладывать, чтобы затем она высвечивалась? (на какой сервис)

    ОтветитьУдалить
  5. Вика, да ни на какой сервис её выкладывать не надо. Найди подходящую, скопируй её адрес и всё. Можешь в тот же черновик блога её скачать и там адрес взять.

    ОтветитьУдалить
  6. Здравствуйте, Вика!
    От всей души - с Новым годом!!! Пусть он будет ярким, счастливым, богатым новыми идеями и свершениями! Спасибо Вам за то, что делитесь с нами своими знаниями, делаете блогожизнь и блоговедение интересными и познавательными!

    ОтветитьУдалить
    Ответы
    1. Татьяна Николаевна, спасибо за поздравления. И Вам от всего сердца желаю всяческих благ, здоровья, благополучия и успехов во всех начинаниях.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск