Необычное превью для «Главной»

Страница на которой выводятся превью статей, размещенных на сайте, обычно именуется «Главной». Чаще всего превью статьи выглядит так: заголовок статьи, небольшая картинка — миниатюра, и небольшой текст в котором, либо начало статьи, либо краткое содержание статьи и кнопочка — ссылка типа «Читать далее», ведущая на страницу со статьей.

Ниже представлена несколько иная «подача» превью статьи. Здесь миниатюра совмещена с кратким анонсом статьи и при наведении курсора на нее открывется несколько кнопок — ссылок. Как это выглядит и работает смотри ниже. В качестве примера приведены превью двух статей ( ссылки, естественно никуда не ведут ).

Первая статья

Последующая статья

Для начала пишем HTML-код

<div class="alt__effect">
  <div class="alt__effect_links">
    <a href="#1" class="alt__effect_button ">Прочитать</a>
    <a href="#1" class="alt__effect_button ">Просмотреть</a>
    <a href="#1" class="alt__effect_button ">Скачать</a>
  </div>
  <div class="alt__effect_text">
    <h3 class="alt__effect_zag">Lorem ipsum dolor </h3> 
    <p class="alt__effect_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</div>

• div class = «alt__effect_links» — блок в котором находятся кнопки — ссылки.
• a class = «alt__effect_button» — кнопка — ссылка
• div class = «alt__effect_text» — блок, содержащий заголовок и текст превью.

div class = «alt__effect» — Блок, объединяющий блок кнопок — ссылок и блок с текстом особенностей не имеет, кроме относительного позиционирования и указания величины перспективы. Ширина блока уменьшена до 85% из-за того, что при наведении курсора с блоком происходит трансформация и появляется тень, которая «наползает» на сайтбар ( в моем случае).

.alt__effect{
  font: 1rem "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: relative;

  width: 85%;
  height: 300px;
  margin: 10px auto;

  perspective: 800px;
}

Блок с кнопками первоначально повернут по оси Х на 70 градусов transform: rotateX(70deg);, «приспущен» вниз на 100рх bottom: 100px; и скрыт opacity: 0;. При наведении курсора он становиться видимым opacity: 1; ,»всплывая» вверх на 70рх при этом «поворачиваясь» в нулевое положение transform: rotateX(0deg) translateY(-70deg);.

.alt__effect_links{
  position: absolute;
  bottom: 100px;
  left: 0;
  z-index: 10;

  width: 100%;
  height: 100px;
  text-align: center;

  opacity: 0;
  transition: 0.6s;
  transform: rotateX(70deg);
}
.alt__effect:hover .alt__effect_links {
  opacity: 1;
  transform: rotateX(0deg) translateY(-70px);
}

Кнопки — ссылки трансформации при наведении курсора не подвергаются

.alt__effect_button {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 3%;

  font-weight: bold;
  text-decoration: none;

  border-radius: 15px;

  color: rgba(255,255,255,.8);
  background: rgb(27,106,184);
  text-shadow: 1px 1px rgba(0,0,0,.7);
  box-shadow:
   inset 0 0 3px 1px rgba(0,0,0,.8),
   inset rgba(0,0,0,.3) -5px -5px 8px 5px,
   inset rgba(255,255,255,.5) 5px 5px 8px 5px,
   1px 1px 1px rgba(255,255,255,.1),
   -2px -2px 5px rgba(0,0,0,.5);

  transition: .2s;
}
.alt__effect_button:hover {
  color: #fff;
  background: rgb(27,106,184);
}
.alt__effect_button:active {
  background: rgb(25,92,158);
  box-shadow:
   inset 0 0 5px 3px rgba(0,0,0,.8),
   inset rgba(0,0,0,.3) -5px -5px 8px 5px,
   inset rgba(255,255,255,.5) 5px 5px 8px 5px,
   1px 1px 1px rgba(255,255,255,.2),
   -2px -2px 5px rgba(0,0,0,.5);
}    

Текстовый блок абсолютно позицирован и изображение (миниатюра) здесь используется в качестве фона. А вот псевдоэлемент :before создает как бы подложку для текстового блока которая первоначально не видна opacity: 0; .

Псевдоэлемент создает точно такой по размерам и положению блок как и основной, но он не содержит никакого контента. Зато у него есть тень box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); и фоновый цвет background: rgba(0, 0, 0, 0.5); .

Дополнительно этот блок трансформирован transform:  rotateX(114deg)  translateZ(-26px)  translateY(110px)  scale(0.75); относитально нижней границы блока transform-origin: bottom; и имеет вид темно-серого параллелогра́мма.

.alt__effect_text {
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;

  height: 300px;
  padding: 20px;
  text-align: center;
  border: 1px solid #888;
  border-radius: 4px;

  color: #fff;
  background: url(images/img.jpg);
  background-size:cover;

  overflow: hidden;
  transition: 0.6s;
}

.alt__effect_text:before{
  content: '';

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);

  opacity: 0;
  transition: all 0.5s;
  transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
  transform-origin: bottom;
}

При наведении курсора на текстовый блок он поворачивается относительно оси Х на 70 градусов transform: rotateX(70deg);, а блок, созданый псевдоэлементом, становиться видимым на 30% opacity: 0.3;, создавая полную иллюзию объема, и «всплывающие» при этом кнопкки дополняют эффект.

.alt__effect:hover .alt__effect_text{
  overflow: visible;
  transform: rotateX(70deg);
} 
.alt__effect:hover .alt__effect_text:before {
  opacity: 0.3;
}   

И в конце немного адаптивности

@media(max-width:667px) {
  .alt__effect_button {
    margin: 0 2%;
    font-size: .9rem;
   }
}

@media(max-width:560px) {
  .alt__effect_button {
    padding: 7px 12px;
    margin: 5px 0;
    font-size: .85rem;
   }
}

@media(max-width:480px) {
  .alt__effect {
    top: 24px;

    width: 70%;
    margin-bottom: 40px;

    font-size: .85rem;
   } 

  .alt__effect_links {
    position: absolute;
    left: 15%;
    bottom: 150px;

    width: 70%; 
   }

  .alt__effect_button {
    display:block;
            
    padding: 7px 12px;
    margin: 5px 0;

    font-size: .85rem;
   }
}