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>



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

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

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

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


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита