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

Доброго времени суток, дорогие мои друзья, читатели и гости блога. Сегодня моя шпаргалка о том, как сделать красивое выпадающее описание для картинки в блоге. Получается достаточно красивый эффект. К тому же очень лёгкий в плане установки. Что-то подобное уже было в этом сообщении. Здесь же, описание будет появляться при наведении курсора на изображение.

Как это будет выглядеть посмотрите на верхней картинке.



Нам понадобится вот такой CSS код.

.imagepluscontainer{
position: relative;
z-index: 1;
}
.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{
position: absolute;
width: 90%;
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgb(192,192,192);
color: white;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a{
color: white;
}
.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}

Обратите внимание на выделенные синим цветом значения. width: 90%;- ширина всплывающего окна с описанием. Для корректного отображения, возможно, придётся поменять на большее или меньшее. И второе background: rgb(192,192,192); -цвет фона.

И код HTML.

<div class="imagepluscontainer" style="height: 199px; width: 220px; z-index: 2;">
<img src=" Адрес вашего изображения" />
<br />
<div class="desc">
Описание к картинке
</div>
</div>

При постоянном применении такого эффекта код CSS устанавливаем непосредственно в шаблон блога перед строкой ]]></b:skin>. Прочитайте здесь если пока не знаете, как это сделать. И дальше при написании сообщения, в том месте где размещаем картинку, переходим в режим HTML и вставляем второй код вызова.

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

<style>тут весь код </style>

И дальше второй код.

Обращу внимание, что результат будет виден при публикации. В редакторе сообщения мы будем видеть вот такую картинку

Вот ещё одну шпаргалку про картинки в блоге отправляем в архив. Если, что-то не будет получаться, спрашивайте разберёмся. А мне остаётся добавить ссылку на источник и расстаться с вами ненадолго.

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

Введите Ваш email