Красивый эффект при наведении на картинку

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Если вы хотите использовать готовые шаблоны с адаптивностью и поддержкой русского языка, обратите внимание на предложение от наших партнеров, там вы найдете много интересного.

Шаг 1. HTML

После того как вы подключили стили к документу, нам необходимо создать разметку, у нас будет контейнер, который мы использовали для демонстрации, также мы добавили блоки с установленным классом:

</div>

<h2>Hover-эффект</h2>

<p>Описание для изображений при наведении курсора мыши.</p>

</div>

Для демонстрации мы использовали шесть изображений, у нас будет один класс image, и класс для отображения контента content, двигаемся далее.

Шаг 2. CSS

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

.container {

width: 80%;

margin: 40px auto;

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));

font-family: "Indie Flower", cursive;

}

Для самого изображения устанавливаем следующий простой класс:

.box img {

width: 100%;

height: 100%;

border-radius: 10px;

}

Затем самый важный элемент, устанавливаем параметры для наших ховер эффектов, а также их правильном отображении при наведении курсора мыши при наведении:

.box {

position: relative;

}

.box::after,

.box::before {

content: "";

position: absolute;

opacity: 1;

transition: all 0.4s ease-out;

top: 1rem;

bottom: 1rem;

left: 1rem;

right: 1rem;

}

.box::before {

border-top: 2px solid white;

border-bottom: 2px solid white;

transform: scale(0, 1);

}

.box::after {

border-left: 2px solid white;

border-right: 2px solid white;

transform: scale(1, 0);

}

.box:hover::before {

background: rgba(0, 0, 0, 1);

transform: scale(1.05, 1);

}

.box:hover::after {

transform: scale(1, 1.05);

}

.box .content {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

padding: 15px;

color: white;

opacity: 0;

}

.box:hover .content {

opacity: 1;

}

.box .content h2,

.box .content p {

padding: 10px;

font-size: 1.3rem;

}

.box:hover img {

opacity: 0.4;

}

Такой достаточно простой прием поможет вам реализовать красивые ховер эффекты для ваших элементов. Материал взят из зарубежного источника и представлен исключительно в ознакомительных целях.

Вот и все. Готово!

CSS, hover, галерея картинок

Опубликовал Cooper 05.09.2018 в 09:30, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.