Появляющийся текст на картинке при наведении курсора для блога на 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 Gedvarde
Анонимный
Justus
Bebs Perkins
Bebs Perkins
Justus
Bebs Perkins
Максим Волченко
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Анонимный
Артём
Анонимный
Евгений
Алексей Яременко
Александр Г
VIk Bit
BVB-Russe
Максим Волченко
Анонимный
Анонимный
Максим
Olga Grape

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

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

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