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

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

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

<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


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

  1. Этот вариант мне больше нравится, чем предыдущий.

    ОтветитьУдалить
    Ответы
    1. Привет, Рамазан. Да, он более интересно смотрится.

      Удалить
  2. Ответы
    1. Виктория Александровна, конечно нужно попробовать. Код простой и результат симпатично смотрится. Спасибо Вам за визит.

      Удалить
  3. Сделала при помощи твоего кода свой бейдж в блоге, давно уже думала о чем-то подобном, чтобы не занимать место информацией. Мне нравится!
    Спасибо за твои шпаргалки.

    ОтветитьУдалить
    Ответы
    1. Олеся, побежала смотреть, что ты там напридумывала. Ой как приятно слышать, что тебе нравится.

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

      Удалить
    3. Олеся, я в тебе никогда и не сомневалась. На лету всё ловишь. Молодец и спасибо.

      Удалить

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