0

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

Появяващо се описание
Добър ден приятели, читатели и посетители на блога 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://lh3.googleusercontent.com/-CfdmvcKiQak/WWhYNNd69_I/AAAAAAAAEr4/98OxnQPAHD8l0KKA-20XM-Fb4dVo3d4iACEwYBhgL/w140-h140-p/tigrov_smok1.jpg" width="200" />
    <br />
<div class="desc">
<strong>
Леопардов смок </strong> Леопардовият смок достига дължина до 105 см. Има много красива шарка от червеникави петна на блед фон. Среща се главно по долината на река Струма.


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



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

Успехи на всички нас!

Няма коментари :

Публикуване на коментар

Ако имате необходимост да вмъкнете HTML код в коментара си, моля използвайте един от инструментите в основното меню - Конвертор на HTML кодове.


Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved