красивый эффект для картинок с появляющемся описанием при наведении курсора

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


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


<div class="container">
<div class="blocks">
<div class="block">
<img alt="" class="block__img" height="340" src="https://3.bp.blogspot.com/-mf6xkEfEwcw/XNeTiMX7MrI/AAAAAAAAMDg/_mnFIXaI1TEC2_3m7oKTAqgNvG5xkj8sQCLcBGAs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2586%25D0%25B0.jpg" width="600" />

<div class="block__body">
<h3>
Мандаринка </h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ullam eligendi reprehenderit natus quae! Optio quae repellat quasi, magnam inventore iusto fuga delectus minima labore alias necessitatibus quia error excepturi.<br />
<a class="btn-learnmore" href=" ###">подробнее</a>

        </div>
</div>
<!-- .block -->

<div class="block">
<img alt="" class="block__img" height="340" src="https://4.bp.blogspot.com/-d_LY7yj7cW0/XNeTlyrPp4I/AAAAAAAAMDk/xKPb09UVXkMrvus-FO6NC06SsABtYk8HACLcBGAs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2586%25D0%25B0%2B1.jpg" width="600" />

<div class="block__body">
<h3>
Голубая олуша</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ullam eligendi reprehenderit natus quae! Optio quae repellat quasi, magnam inventore iusto fuga delectus minima labore alias necessitatibus quia error excepturi.<br />
<a class="btn-learnmore" href="###">подробнее</a>

        </div>
</div>
<!-- .block -->

  </div>
<!-- .blocks -->   

</div>
<style>
.container {
  padding: 1em;
}
.blocks {
  display: flex;
  flex-flow: row nowrap;
}
.block {
  position: relative;
  width: 42.3%;
  height: 340px;
  max-height: 340px;
  margin-right: 1em;

  border: 1px solid #ccc;
  overflow: hidden;
}
.block:hover .block__body {
  position: absolute;
  top: 0;
  background: #2980b9;
  color: #fff;
  height: 100%;
  transition: top .5s;
}
.block:hover .block__body h3 {
  color: #fff;
}
.block__body {
  padding: 1em;
  top: 100%;
} .btn-learnmore{
  border-radius: 100px;
  padding: 0;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  text-align: center;
  margin: 0;
  cursor: pointer;
  overflow: visible;
  padding: 11px 23px;
  background-color: none;
  font-weight: bold;
  text-transform: uppercase;
  outline: none;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  letter-spacing: 0.5em;
  color: #fff;
}
.btn-learnmore:hover{
  background: #fff;
  color: #2f7195;
}
</style>


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

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

Если есть необходимость добавить ещё картинки, в первом коде HTML нужно добавить ещё вот такой фрагмент

<div class="block">
<img alt="" class="block__img" height="340" src="https://4.bp.blogspot.com/-d_LY7yj7cW0/XNeTlyrPp4I/AAAAAAAAMDk/xKPb09UVXkMrvus-FO6NC06SsABtYk8HACLcBGAs/s320/%25D0%25BF%25D1%2582%25D0%25B8%25D1%2586%25D0%25B0%2B1.jpgwidth="600" />

<div class="block__body">
<h3>
Голубая олуша</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ullam eligendi reprehenderit natus quae! Optio quae repellat quasi, magnam inventore iusto fuga delectus minima labore alias necessitatibus quia error excepturi.<br />
<a class="btn-learnmore" href="###">подробнее</a>

        </div>
</div>
<!-- .block -->


Совершенно не сложные настройки. Готовый код, как всегда, устанавливает в редакторе Блоггер в режиме HTML. Можно организовать целую галерею картинок с всплывающим описание и кнопкой для перехода на отдельную страницу.


Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

  1. Спасибо, Виктория! Интересно, как всегда!

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

      Удалить
  2. Действительно, красиво! Ну, почему мне не на 20-30 лет меньше. "Ах, я тогда моложе и лучше, кажется была..."

    ОтветитьУдалить
    Ответы
    1. Семён, все мы были когда - то моложе. Се ля ви.

      Удалить
  3. Эффект классный!!!
    Применить бы его, да пока не где))))...

    ОтветитьУдалить
  4. Виктор, всему своё время. Я сегодня с таким удовольствием разглядывала ваши шаблоны. Класс просто. Так захотелось соо своими читателями поделится. Может гостевой напишите у меня. По типу этого http://www.shpargalochki.ru/2015/06/jandeks-vebmaster-google-search-console-dlj-novichkov.html или этого http://www.shpargalochki.ru/2018/09/graphic-design-service-Canva.html 2 активные ссылки в статье на блог или соц. сети. Правда сейчас посещалка поменьше.

    ОтветитьУдалить
    Ответы
    1. Было бы не плохо пост написать...)))
      Это надо наверное сео статью, с заголовками, ключевиками, с большим количеством букв? =)
      Или акцентироваться на картинках и описать пару шаблонов?
      А с этим никогда не сталкивался (гостевыми постами).

      Удалить
  5. Виктор, давайте я Вам завтра на почту напишу. Это просто.

    ОтветитьУдалить
  6. Симпатичная фишка, спасибо, Вика!

    ОтветитьУдалить
  7. Рада, что понравилось. Тебе, спасибо за визит.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск