Анимированный эффект описания изображения на Blogspot (Blogger)

В сегодняшней статье я хочу показать вам как сделать анимированный эффект описания изображения на Blogspot, при наведении курсора. На мой взгляд, очень полезная и эффектная штука. Устанавливается без использования Javascript. А это значит, что на качество быстродействия вашего блога никак не отразится, то есть в загрузке ваш блог не замедлится.

И так, как нам может быть полезен это эффект. Вы можете описать действие, которое изображено на рисунке, написать название и дату события. Более того, вы можете в описании вставить ссылку, которая будет вести на источник информации, это может быть статья вашего блога, которая полностью раскрывает действие показанное на изображении.

Так же, рисунок с таким эффектом, может служить рекламным блоком, при наведении на который будет всплывать краткое описание (например партнёрки) и ссылка для перехода, если посетителя это предложение заинтересует. В общем, как вы можете применить этот эффект, зависит от вашей фантазии.

Анимированный эффект описания изображения на Blogspot

Ну что ж друзья, давайте приступим к установке анимированного эффекта описания изображения. Я буду показывать на примере старого интерфейса Блоггера. И так, поехали…

Панель управления >> Дизайн >> Изменить HTML
Делаем резервное копирование шаблона
С помощью клавиш Ctrl+F находим это код: ]]></b:skin>

И прямо над ним вставляете код который вы видите ниже:

#image-hover {

}

#figure {

position:relative;

float:left;

margin:10px;

overflow:hidden;

padding: 1px;

}

#figure:hover {

-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);

box-shadow:0 0 20px rgba(0,0,0,0.75);

}

#figure .caption {

position:absolute;

bottom:0;

left:0;

opacity: 0.75;

margin-bottom:-115px;

-webkit-transition: margin-bottom;

-webkit-transition-duration: 400ms;

-webkit-transition-timing-function: ease-out;

-moz-transition-property: margin-bottom;

-moz-transition-duration: 400ms;

-moz-transition-timing-function: ease-out;

-o-transition-property: margin-bottom;

-o-transition-duration: 400ms;

transition: margin-bottom;

transition-duration: 400ms;

transition-timing-function: ease-out;

}

#figure:hover .caption {

margin-bottom:0px;

}

#image-hover .caption {

width:100%;

height:90px;

padding:10px;

background:#111;

color:#fff;

font-family: Arial, Helvetica, sans-serif;

}

#image-hover .caption b {

text-shadow: 0px 2px 0px #000;

}

#image-hover .caption {

color: #ddd;

line-height: 14px;

font-size: 14px;

text-shadow: 0px 2px 0px #000;

}

Всё, в коде мы всё сделали. Нажимаете кнопку «сохранить шаблон».

Теперь, если в статье, для изображения вы хотите сделать такой эффект, вам просто нужно вставить ссылку на изображение в этот код:

<b>Название картинки</b>

Описание картинки

</span>

</div>

Ссылку на изображение вы можете взять где угодно, и вставить её вручную в код. Но если вы загружаете картинку через редактор блоггера, то она имеет такой вид:

Ну вот друзья и всё, теперь вы сможете на своём блоге сделать анимированный эффект описания изображения. Надеюсь вам он пригодится и принесёт какую-то пользу.