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

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

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



Нам понадобится вот такой 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


11 комментариев:

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

    ОтветитьУдалить
  2. Оля, привет. Я не совсем поняла что ты имела ввиду- в тестовом блоге код какой то стоит, что картинки всплывают-. В этом коде картинка на месте а внизу появляется описание.

    ОтветитьУдалить
    Ответы
    1. Вика, картинка не на месте. Когда подвожу курсор, она всплывает и внизу появляется описание. У меня в одном из тестовых блогов установлен специальный код, эффект картинок тот же. Поэтому я и спросила.

      Удалить
  3. Да нет, вроде с картинкой всё ОК. Она немного увеличивается и всё. Так это по-моему у всех родных шаблонов. Или я опять не то.

    ОтветитьУдалить
  4. Интересное решение, возьму на заметку, возможно пригодиться. Спасибо за работу.

    ОтветитьУдалить
  5. Интересное решение, возьму на заметку. Думаю, что в отдельном сообщении где-нибудь будет не плохо добавить, например, какой-нибудь фото-отчет. Спасибо.

    ОтветитьУдалить
  6. Привет Олеся. На самом деле рабочий вариант очень не плохо смотрится. Пользуйся.

    ОтветитьУдалить
  7. Добрый день, Вика. Во-первых, спасибо за полезную информацию и ваш труд))). Смотрю часто ваш блог, здесь много всяких полезностей. Второе - вопрос. У меня блог о хобби, фотографии имеют большое значение, но я боюсь перезагрузить сайт, как правило, большие фото имеют большой "вес". Если уменьшать, то качество измениться. В том числе эти прибанбасы не перезагружают сайт? вопрос чайника)

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. конечно большие фото дают нагрузку. Особенно в формате Gif, PNG. Но и без картинок скучно. Прежде всего нужно загружаемую картинку сжать. Сервисов для этого в сети много. Самый простой http://reduction-image.com/resizer-online/index.php?lg=RU
      или этот http://livechat.su/resize/
      очень хороший этот http://www.jpegmini.com/
      А насчёт прибамбасов лишнего не надо конечно, конкретный вариант очень лёгкий. На CSS и небольшой код HTML.
      Спасибо за внимание к моему блогу.

      Удалить
    2. Спасибо, дельно. Вика, может, вы мне предложите вариант, как сделать увеличивающиеся фото, это сложно? или лишнее на моём сайте?

      Удалить
    3. Конечно можно сделать увеличение картинки. Посоветовала бы Вам прочитать этот пост. http://www.shpargalochki.ru/2014/11/krasivye-jeffekty-izobrazhenij.html
      И ещё http://www.shpargalochki.ru/2015/02/dva-jeffekta-LIGHTBOX-v-BLOGGER.html#more
      возможно что-то подберёте. Удачи, Интересные у вас поделки из газеты. Знала такую технологию но никак не могу взяться.

      Удалить

Пользовательский поиск
Foto Saya
My Photo