Анимация при наведении на анонс записи на чистом CSS

0 ∞

В этом руководстве мы создадим анимацию раскрытия анонса записи блога при наведении курсора с помощью CSS и без применения JavaScript.

Каждый пост блога в списке представлен только основным изображением с заголовком. При наведении курсора мыши на изображение фон увеличивается, и заголовок перемещается вверх. После этого отображается анонс поста, ссылка «Читать дальше», дата публикации и примерное время прочтения.

Содержание

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Создайте CSS-файл, назовите его styles.css и подключите его в HTML-документа:

<link rel="stylesheet" href="styles.css">

Я использовал шрифт «Lato» для текста и шрифт «Font Awesome» для иконок. Подключите эти шрифты:

<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
Эффекты наклона при наведении

HTML

Сначала добавьте в body открывающий и закрывающий теги div с классом "wrapper". Это контейнер, внутри которого будет располагаться один элемент article. Задайте ему класс "post".

<div class="wrapper">
    
<article class="post">
       
   </article>
 
</div>

Фоновое изображение нельзя привязать к элементу article. Так как нужно реализовать эффект масштабирования. Поэтому создадим пустой div внутри article специально для этой цели.

<div class="post-bg"></div>

CSS

Добавьте следующие стили в файл styles.css:

body{
   font-family: 'Lato',sans-serif;
   line-height: 1.5;
}
a{
   color: #fff;
   text-decoration: none;
}
a:hover{
   color: #b1fffa; /* Светло-зеленый цвет */
}
.wrapper{
   margin: auto; /* Это центрирует содержимое на странице */
   width: 1100px; /* Вы можете изменить это значение для меньших экранов с помощью медиазапроса */
   padding: 40px;
}

Затем стилизуем элемент article:

article.post{
   position: relative;
   width: 515px; /* Вы можете изменить это значение для меньших экранов с помощью медиазапроса */
   height: 450px; /* Высота обязательна */
   overflow: hidden;
}

Свойство position нужно установить, потому что мы будем абсолютно позиционировать дочерние элементы (заголовок, анонс и другой текст). Свойство overflow:hidden гарантирует, что этот блок не расширится при преобразовании дочернего фонового элемента div.

Теперь необходимо добавить стили к div фонового изображения.

.post-bg{
   width: 100%;
   height: 100%;
   background-image: url('https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
   background-position: center;
   background-size: cover;
   transition: all .7s;
}
Скольжение изображений при наведении с использованием CSS3

Я использовал прямую ссылку на изображение с pexels.com. Вы можете использовать собственное изображение.

Свойство transition используется для установки свойств, которые нужно анимировать. Ниже приведен фрагмент кода, используемый для реализации эффекта масштабирования:

.post:hover .post-bg,
.post:focus .post-bg {
   transform: scale(1.1);
}

Теперь при запуске кода в браузере вы увидите изображение поста. А при наведении на него курсора мыши изображение увеличится.

CSS

Для этого мы просто увеличиваем его размер, используя свойство transform, когда родительский элемент выделен фокусом. Но так как для свойства overflow родительского элемента задано значение hidden, то кажется, что изображение изменяется.

Далее поверх этого изображения накладывается темный фон. А при наведении курсора мыши наложение темнеет еще сильнее. Для этого используется псевдоэлемент ::after:

.post-bg::after {
   content: '';
   background: rgba(0, 0, 0, 0.5);
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   transition: all .7s;
}

Свойства position:absolute вместе с width и height в 100% заставляет этот псевдоэлемент полностью перекрывать изображение. Цвет фона черный с непрозрачностью 0,5. Мы снова используем свойство transition для анимации.

Приведенный ниже код увеличивает непрозрачность, когда на родительский элемент с классом .post наведен курсор мыши.

.post:hover .post-bg::after,
.post:focus .post-bg::after {
   background: rgba(0, 0, 0, 0.7);
}

Непрозрачность 0.5 изменяется на 0.7.

Часть 2

HTML

После блока div с классом .post-bg добавим все необходимые элементы:

<h2 class="post-title">
   <a href="#">Pure CSS Animation of Blog Post Excerpt on Hover</a>
</h2>
 
 
 
   The excerpt of your post that compels the user to click on "Read More" link below
 
 
<a class="post-read-more" href="#">
Read More
<i class="fa fa-arrow-right"></i>
</a>
 
<div class="post-date-time">
   <span class="post-icon-text">
      <i class="fa fa-calendar"></i>
      June 1, 2020
   </span>
   <span class="post-icon-text">
      <i class="fa fa-clock"></i>
      8 Minutes Read
   </span>
</div>
Паралакс-скроллинг веб-сайта на чистом CSS

CSS

Лучший способ правильно разместить все HTML-элементы – установить position:absolute и использовать для выравнивания свойства top, left и right.

.post-title, .post-excerpt, .post-read-more, .post-date-time {
   position: absolute;
   top: 20%;
   left: 8%;
   right: 8%;
   text-align: center;
   overflow: hidden;
}

Теперь при просмотре страницы в браузере вы увидите, что все элементы перекрывается. Присвоим различные значения свойству top и разместим все правильно.

.post-title{
   top: 15%;
}
.post-excerpt{
   top: 46%;
}
.post-read-more{
   top: 67%;
}
.post-date-time{
   top: 80%;
}

Этот код устанавливает положение элементов. Также потребуются дополнительные стили, чтобы задать правильный размер шрифта и интервал. Замените приведенный выше код следующим:

.post-title{
   top: 15%;
   max-height: 120px; /* Обрезает слишком длинные заголовки */
}
.post-title a{
   font-size: 1.4em;
   line-height: 1;
}
.post-excerpt{
   top: 46%;
   max-height: 82px; /* Обрезает слишком длинные заголовки */
   font-size: 1.1em;
}
.post-excerpt:after{
   content: '...';
}
.post-read-more{
   top:67%;
   font-weight: bold;
   font-size: 1.1em;
}
.post-date-time{
   top: 80%;
   font-size: 0.8em;
}
.post-icon-text {
   padding: 0 10px;
}
i.fa{
   padding: 0 5px;
}
CSS

Скроем все элементы кроме заголовка, установив для opacity значение 0.

.post-excerpt, .post-read-more, .post-date-time {
   opacity: 0;
}

Измените значение top для .post-title на 35%, чтобы заголовок отображался в центре. А значение top для .post-date-time на 90%, чтобы дата и примерное время прочтения сместились вниз.

Теперь осталось реализовать анимацию. Для этого задайте свойство transition для всех четырех элементов:

.post-title, .post-excerpt, .post-read-more, .post-date-time {
   transition: all 0.5s;
}

Затем установите свойства для каждого элемента при наведении курсора мыши.

Свойство top для .post-title при наведении на .post

.post:hover .post-title{
   top: 15%;
}

opacity для .post-excerpt и .post-read-more

.post:hover .post-excerpt, .post:hover .post-read-more{
   opacity: 1;
}

top и opacity для .post-date-time

.post:hover .post-date-time{
   top: 80%;
   opacity: 1;
}

Теперь вы знаете, как создать эффект масштабирования фонового изображения и анимировать различные элементы только с помощью CSS.

ИСХОДНЫЙ КОД