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

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

А сам эффект можно посмотреть на этом тестовом блоге.

Копируйте код, приведённый ниже.

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;6
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}

.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#1C089B;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:#D8758A }
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src=" Адрес вашего изображения" alt="фон блога" />
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Заголовок картинки</h4>
    <p>Краткое описание....</p>
    <p><a class="more" href=" Здесь ссылка на страницу ">Подробнее</a></p>
   </div>
  </div>
 </div>

В CSS, который я выделила синим цветом, можно изменить все значения на нужные вам. Кто затрудняется, спрашивайте в комментариях. В коде HTML вписывайте ваши варианты. Эти строчки отмечены красным.

Когда сделаете все настройки, готовый код вставляйте в гаджет HTML/JavaScript в любое место блога. Или прямо в сообщение, перейдя в режим HTML.

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

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

Введите Ваш email