Главная страница » jQuery » Красивый эффект при наведении на картинку

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

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

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

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

Красивый эффект при наведении на картинку. Процесс реализации на сайте.

Шаг 1. HTML

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

</div>

<h*>Hover-эффект</h*>

<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 h*,

.box .content p {

padding: 10px;

font-size: 1.3rem;

}

.box:hover img {

opacity: 0.4;

}

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