Приветствую посетителей и читателей блога. Сегодня информация о виджете с всплывающим описанием изображения при наведении курсора мыши. В описании Вы сможете добавить активную ссылку на источник информации.
То есть, установили к примеру гаджет картинки группы ВКонтакте, даете краткое описание и ссылку на страницу для перехода. Возможностей применения такого виджета много, для всех блогов разной тематики.
То есть, установили к примеру гаджет картинки группы ВКонтакте, даете краткое описание и ссылку на страницу для перехода. Возможностей применения такого виджета много, для всех блогов разной тематики.
При наведении курсора посетитель прочитает описание и сможет перейти по ссылке.
Раздвижной гаджет с всплывающим описанием информации |
Описание изображения при наведении с ссылкой на источник |
Копируйте код и устанавливайте дизайн-добавить гаджет в нужное место макета блога
<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>
.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
- Сохранить гаджет без названия заголовка;
- Изменить размер изображения прокруткой колесика мыши;
Еще больше информации о картинках в меню содержание, ярлык изображения.
Рекомендуемый контент: