Всплывающее описание изображения с переходом по ссылке на источник

---

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

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

При наведении курсора посетитель прочитает описание и сможет перейти по ссылке.

Раздвижной гаджет с всплывающим описанием информации

Описание изображения при наведении с ссылкой на источник

Копируйте код и устанавливайте дизайн-добавить гаджет в нужное место макета блога

<style>
.image-box {
  width:200px;height:200px;overflow:hidden;background-color:green;
 border:0px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 14px/1.4 Arial,Sans-Serif;
  color:#006400;
}
.image-container,
.image-details {height:200px;border:1px solid #f8f8ff;background-color:#f8f8ff;border-bottom:1px double #f00;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:200px;height:200px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:#fff;

}
.image-details h4,
.image-details p {
  margin:px 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}

.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:15px 0 0;
}

.image-box:hover {border-color:#ccc; width:200px;
  height:200px;}
.image-box:hover .image-container {margin-top:-180px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="200" height="200" src="https://3.bp.blogspot.com/-4B-knK8puDk/VdokdssImRI/AAAAAAAAKBw/5BitE8XO-ak/s1600/vk-but.png" />
  </div>
  <div class="image-details">
   <div class="details">
    <h4>ВКонтакте</h4>
    <p>Для владельцев блога Blogspot сообщество ВКонтакте. Присоединяйтесь!</p>
    <p><a class="more" href="https://vk.com/public69015389">ТУТ</a></p>
   </div>
  </div>
 </div></div> <div style="clear:both;"></div>

Все, что выделено жирным шрифтом, можно изменить: ширина и высота должны быть везде одинаковы; 14 px размер шрифта текста (описания); 006400 цвет шрифта; 

Далее форма, размер и цвет границы контейнера. У меня выделена нижняя граница красного цвета; font-size: 120% это размер шрифта заголовка; margin-top:-180px высота поля описания; 

Затем измените адрес картинки на свой, впишите заголовок и описание, вставьте ссылку и впишите вместо ТУТ "читать далее" или другой текст.

В коде многое можно изменить для оформления гаджета, строки выделила курсивом.    

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

Посмотрите другие статьи:

• Скрыть navbar atom attribution с помощью CSS 
• Сохранить гаджет без названия заголовка; 
• Изменить размер изображения прокруткой колесика мыши; 

Еще больше информации о картинках в меню содержание, ярлык изображения.

Рекомендуемый контент: