17 марта 2018

Всплывающий текст на картинке при наведении курсора


Наведите курсор

Кошачий террор

...Коты привлекли внимание странным поведением - они кидались на припаркованные машины...
Читать дальше




HTML код картинки со всплывающим текстом при наведении курсора:

<center>
<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:center;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 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:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.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 alt="Наведите курсор" height="280" src="Ссылка адрес вашего изображения" width="280" />
  </div>
<div class="image-details">
<div class="details">
<h4>
Название изображения</h4>
Текст описания изображения...<br />
<a class="more" href="Адрес, куда ведет ссылка">Читать дальше</a></div>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</center>



   Выделенные жирным шрифтом фрагменты кода заполняются индивидуальными значениями. В альбомах Google.Фото берем ссылку на изображение так: открываем изображение; в меню, открытом правой кнопкой мыши, кликаем по строке " Копировать адрес изображения"; вставляем в код. Изменяем при необходимости размеры изображения, заполняем др. значения.

   Готовый HTML код вставить в HTML редактор блога.

Источник

Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...