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

Друзья, приветствую всех на блоге bloguspeh.ru. В сегодняшней статье я хочу показать вам как сделать анимированный эффект описания изображения на Blogspot, при наведении курсора. Для того, чтобы увидеть эффект в действии, наведите курсор на картинку на моём Демо блоге.

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

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

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

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

1) Панель управления >> Дизайн >> Изменить HTML
2) Делаем резервное копирование шаблона
3) С помощью клавиш Ctrl+F находим это код: ]]>
4) И прямо над ним вставляете код который вы видите ниже:

#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;
}

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

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

Ссылка на картинку"/>

Название картинки
Описание картинки

Ваша ссылка на изображение
Впишите название своего изображения
Напишите описание этого изображения

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

https://2.bp.blogspot.com/-B1Tx99ArSuU/T4hmksccMAI/AAAAAAAAByA/zE32cgVuBbc/s320/1332493920_small-business-training-odessa.jpg" width="320" />

То что я выделил жёлтым цветом, это и есть ссылка на изображение, которую нужно вставить в код эффекта.

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