Появляющийся текст на картинке при наведении курсора для блога на Blogger, Блогспот

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Сегодня предлагаю вам замечательную конструкцию для украшения вашего блога! Речь идет об описании картинки, появляющееся при наведении курсора. Я специально предлагаю упрощенную версию, которая просто копируется и вставляется текстовый редактор (Изменить HTML).

» наведи курсор

ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК Здесь можно поместить текст

 

 

<center><style type="text/css">
.blogodel {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.blogodel:hover {cursor: pointer;}

.blogodel img {
  background-color: #459;
  border: none;
  margin: 0;
  padding: 10px;
}

.blogodel .more {
  background-color: #123;
  color: #FFF;
  font-size: 14px;
  padding: 5px 10px;
  filter:alpha(opacity=65);
  opacity:.65;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)';
  position: absolute;
  right: 10px; bottom: 10px;
}
.blogodel:hover .more {display: none;}

.blogodel .desc {display: none;}
.blogodel:hover .desc {
  background-color:#345;
  display: block;
  margin: 0;
  color: #FFF;
  font-size: 12px;
  padding: 10px;
  filter:alpha(opacity=75);
  opacity:.75;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
}

.blogodel:hover .desc strong {
  display: block;
  font-size: 14px;
  line-height: 1em;
}
</style>

<div class="blogodel">
    <img border="0" height="300" width="289" src="http://3.bp.blogspot.com/-wLs2KcjtJHE/UEoM7N9KfGI/AAAAAAAABps/pTM8tF1T8Ww/s320/tatoo-html.jpg" />
    <div class="more">» наведи курсор</div>
    <div class="desc"><strong>ЗДЕСЬ ПРОПИСЫВАЕТЕ БОЛЬШИМИ БУКВАМИ ЗАГОЛОВОК</strong> Здесь можно поместить текст</div>
</div></center>

Там где красная маркировка, вы можете поместить свою картинку. Желтая маркировка это размеры. Зеленая цвет рамки. Если появятся вопросы, задавайте в комментариях.