Эффект появляющегося описания с увеличением картинки на CSS.

Доброго времени суток, друзья, читатели и гости блога. Предлагаю сделать сегодня красивый эффект для изображений блога используя только CSS. В результате получиться аккуратная выскальзывающая подпись и сама картинка немного увеличивается.
И добавим лёгкий эффект затемнения. Посмотрите сразу, что имеем в итоге. Наведите курсор на изображение.

Сразу оговорюсь. Если предполагаете часто применять такую надпись к изображениям, то уместнее будет предложенный ниже код установить непосредственно в шаблоне блога. Вкладка шаблон - изменить HTML. Находим строку ]]></b:skin> и, как всегда, над ней устанавливаем скопированный код.

В единичных случаях, его вставляем непосредственно в редакторе сообщения, перейдя в режим HTML и заключив в теги <style>тут код</style>.

Код.

.titlezoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none}
.titlezoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2}
.titlezoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}
.titlezoom img{border:none;display:block;z-index:1}
.titlezoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.titlezoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}
.titlezoom:hover:before{opacity:0.3}
.titlezoom:hover:after{left:0}

Теперь загружаем нужную картинку. Если посмотреть в режиме HTML, то код изображения выглядит обычно так.

<a href="http://s019.radikal.ru/i600/1608/fe/8166001da14a.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://s019.radikal.ru/i600/1608/fe/8166001da14a.jpg" height="127" width="200" /></a>

Сейчас мы к этому коду должны добавить всего лишь 2 вещи. Задать ему класс

class="titlezoom" и добавить саму подпись. Вот так-

<a class="titlezoom" title=" котёнок спит" href="http://s019.radikal.ru/i600/1608/fe/8166001da14a.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://s019.radikal.ru/i600/1608/fe/8166001da14a.jpg" height="127" width="200" /></a>

После публикации сообщения можно любоваться красивым эффектом картинки с выскакивающим заголовком.

Ещё эффекты для изображений.

Появляющееся описание у картинки.

Выпадающее описание у картинки.

Желаю вам удачи и до скорых встреч. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email