CSS

buxip.blogspot.ru - является моим самым ранним, успевшим даже побывать одиннадцать месяцев в заморозке, блогом.
 Этот блог, как и два его собрата, отнесен мной к разряду моих экспериментальных веб-страниц.
Поэтому нечто, может показаться слишком.
На этот раз, обкатываются Стили, задача которых заключается в отображении текстового содержимого, при наведении на картинку курсора мыши.
Пока, все проходит великолепно.

ƾ наводим курсор ƾ

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

Можно и так добавить подпись

Для тех, кто захочет повторить эти манипуляции, прошу учесть, что автор сих строк, за происходящее далее, снимает с себя любую ответственность.
Загрузите вашу картинку в тело сообщения, и получите её адрес, который нужно будет вставить в эту html-конструкцию (адрес выделен синим цветом).

<div class="arch">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIx-300MLZCbjgw6hgBIfVnm6JBuyzzHUkVIprEMclS46wlprEI30lxnUToA-ZeYlQZtgX8YA0QOv-vEV9Jtfz-GBfjpbuueWIWzWbsIBQhvbosTxS8Su0rPijeXlX2z694KMdCZGpZ4Y/s320/$$$.jpg" width="227" title="" />
    <br />
<div class="more">
ƾ наведи курсор ƾ</div>
<div class="desc">
<strong>ЗДЕСЬ ПРОПИСЫВАЕТСЯ ЗАГОЛОВОК возможно  ПРОПИСНЫМИ или ДАЖЕ ЗАГЛАВНЫМИ БУКВАМИ !!!!!!!!!</strong>
 Здесь можно поместить ссылку</div>
</div>

Сами стили, достаточно скопировать и поместить сюда.
Шаблон - Настроить - Дополнительно - Add CSS
Только без контейнера, он нужен, если вы пропишете код в страницу, но это будет не совсем, мягко выражаясь - мудро.
Убираем контейнер <style type="text/css">все что внутри оставляем неизменно</style>.

.arch {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.arch:hover {cursor: pointer;}
.arch img {
  background-color: #164973;
  border: none;
  margin: 0;
  padding: 7px;
}
.arch .more {
  background-color: #123;
  color: #FFF;
  font-size: 14px;
  padding: 5px 10px;
  filter:alpha(opacity=50);
  opacity:.50;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
  position: absolute;
  right: 10px; bottom: 10px;
}
.arch:hover .more {display: none;}
.arch .desc {display: none;}
.arch:hover .desc {
  background-color:#345;
  display: block;
  margin: 0;
  color: #FFF;
  font-size: 12px;
  padding: 10px;
  filter:alpha(opacity=80);
  opacity:.80;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
}
.arch:hover .desc strong {
  display: block;
  font-size: 14px;
  line-height: 1em;
}

Про оптимизацию изображений, можно узнать из свежего поста на другом блоге здесь wmdv