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

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

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

<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.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 -->

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

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

Введите Ваш email