Появяващо се описание на изображение

Добър ден приятели, читатели и посетители на блога Blogzablogove.com. Как да си направим появяващо се описание на изображение, когато преместим курсора върху него. За тези, които публикуват много снимки в блога си такъв появяващ се текст изглежда много подходящ. Варианти на появяващо се описание на изображение има много.
Ефект на изплуващо описание на изображението ви беше предложено тук. И малко по-рано имах публикации за други ефекти на изображения. Ако проявявате интерес, разгледайте предложените публикации.

Днес ще направим ето това описание на изображение. Поставете курсора на мишката върху изображението.

Леопардов смок Леопардовият смок достига дължина до 105 см. Има много красива шарка от червеникави петна на блед фон. Среща се главно по долината на река Струма.

В Blogger това може да се прилага директно в редактора на публикациите. В режим на HTML.

Кодът е:

<center><style type="text/css">
.VVB{
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.VVB:hover {cursor: pointer;}
.VVB img {
  border: none;
  margin: 0;
  padding: 5px;
}
.VVB .desc {display: none;}
.VVB:hover .desc {
  background-color:#345;
  display: block;
  margin: 0;
  color: #FFF;
  font-size: 14px;
  padding: 10px;
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
}
.VVB:hover .desc strong {
  display: block;
  font-size: 16px;
  line-height: 1em;
}
</style>

<div class="VVB">
<img border="0" height="300" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gsdrm3l5kbDxr4otfLGcCqvpij_xeMKbcoCs5tIDuxdfIyG5vkEe95qw_UqI2fuO408XcpBy1SaC1BnvaRd2_swQicSAgrHtueVEcxRPZnJtjh1cRjC5a23sij5k-2lOZvfV73LmbW4/w140-h140-p/tigrov_smok1.jpg" width="200" />
    <br />
<div class="desc">
<strong> Леопардов смок </strong> Леопардовият смок достига дължина до 105 см. Има много красива шарка от червеникави петна на блед фон. Среща се главно по долината на река Струма.

</div>
</div>
</center>

На мястото в кода оцветено в синьо поставете адреса на вашето изображение. В червено е оцветено наименованието на изображението. В жълто е неговото описание.
Това е за днес. Нека имате  красиви изображения в блога си!

Успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: