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


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

Сегодня предлагаю вам замечательную конструкцию для украшения вашего блога! Речь идет об описании картинки, появляющееся при наведении курсора. Я специально предлагаю упрощенную версию, которая просто копируется и вставляется текстовый редактор (Изменить 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>


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

29 коммент.:

Илья
Laila
Анонимный
Justus
Olga Shevnina
Olga Shevnina
Justus
Olga Shevnina
Максим Волченко
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Анонимный
Артём
Анонимный
Евгений
Unknown
Unknown
Unknown
BVB-Russe
Максим Волченко
Анонимный
Анонимный
Максим
Unknown

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

Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

Доска почета

Плюсани блог!