Причудливые анимации, включающие наведение курсора на изображения, раньше требовали JavaScript. Больше не надо! CSS поможет оживить ваши миниатюры и галереи.

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

Вы можете создавать различные стили анимации на ваших изображениях. К ним относятся размытие или масштабирование фона, исчезновение или скольжение текста, а также изменение цвета фона.

Создание HTML для изображений

Начните с создания index.html файл в пустой папке на вашем компьютере, затем откройте файл в текстовом редакторе. Внутри файла создайте скелет HTML и добавьте следующую разметку в открывающий и закрывающий теги body:

<дивсорт="сетка">
<дивсорт="обертка изображения">
<изображениесорт="размытие"источник=" https://picsum.photos/500?random=1"альтернативный="">





instagram viewer



<дивсорт="контент исчезает">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Солюта реклама
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див>


<дивсорт="обертка изображения">
<изображениесорт="зум размытие"источник=" https://picsum.photos/500?random=2"альтернативный="">


<дивсорт="контент исчезает">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Солюта реклама
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див>


<дивсорт="обертка изображения">
<изображениесорт="размытие"источник=" https://picsum.photos/500?random=3"альтернативный="">


<дивсорт="содержание слайд-влево">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Солюта реклама
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див>


<дивсорт="обертка изображения">
<изображениесорт="серый"источник=" https://picsum.photos/500?random=3"альтернативный="">
<дивсорт="содержание слайд-влево">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Солюта реклама
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
див>
див>
див>

Это контейнер сетки с четырьмя обертками изображений. Элементы div с изображение-обертка класс служит оболочкой для изображения и соответствующего ему текста. К изображению и содержимому каждого раздела добавлен уникальный набор классов.

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

Добавление базового CSS

Теперь, когда вы создали HTML, пришло время стилизовать его с помощью CSS. Создать стиль.css файл и ссылку на эту таблицу стилей из вашего HTML-файла внутри раздел:

<связьотн.="таблица стилей"href="стиль.css">

Внутри вашего стиль.css файл, первое, что вам нужно сделать, это обнулить поле для тела и установить нижнее поле:

тело {
допуск: 0;
нижняя граница: 20бэр;
}

Затем вам нужно превратить самый внешний контейнер в Сетка CSS, которую можно использовать для размещения элементов в двух измерениях.. Следующий код создает сетку с соответствующим количеством столбцов или строк. Минимальный размер каждого столбца — 300 пикселей, а максимальный размер — 1 часть контейнера:

.сетка {
отображать: сетка;
сетка-шаблон-столбцы: повторить(автоподгонка, мин Макс(300пикс., 1фр));
}

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

.image-обертка {
позиция: родственник;
переполнение: скрытый;
}

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

.image-обертка > изображение {
отображать: блокировать;
ширина: 100%;
соотношение сторон: 1 / 1;
объект-подходящий: крышка;
позиция объекта: центр;
}

Что касается текста, расположите его по центру и задайте прозрачный светло-серый цвет фона:

.image-обертка > .содержание {
позиция: абсолютный;
вставка: 0;
размер шрифта: 2бэр;
набивка: 1бэр;
фон: RGBA(255, 255, 255, .4);
отображать: сгибать;
выравнивание элементов: центр;
выравнивание содержания: центр;
}

Сохраните файл CSS и откройте index.html в вашем браузере. Вы должны найти страницу, похожую на ту, что на изображении ниже.

Установка перехода на изображения и тексты

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

.image-обертка > изображение,
.image-обертка > .содержание {
переход: 200РСлегкость входа;
}

Это означает, что все эффекты перехода (например, постепенное появление, масштабирование и размытие) будут длиться 200 миллисекунд и будут иметь одинаковую временную кривую.

Анимация плавного появления и размытия

Первый стиль анимации — затухание в тексте. Когда вы наводите курсор на определенную оболочку изображения, содержимое, имеющее тускнеть Этот эффект (анимация появления и исчезновения) будет применен к классу. Этого можно добиться, установив непрозрачность на ноль и изменив ее на единицу при наведении курсора мыши на определенную оболочку изображения:

.image-обертка > .содержание.тускнеть {
непрозрачность: 0;
}
.image-обертка:наведите > .содержание.тускнеть {
непрозрачность: 1;
}

Если вы сохраните файл и проверите свой браузер, вы увидите действующую анимацию постепенного появления. Но вы также можете заметить, что текст немного трудно читать (если изображение резкое и контрастное). Напомним, что все изображения также имеют имя класса размытие. Это для размытия изображений, чтобы добавить столь необходимый контраст между ними и текстом:

изображение-обертка:наведите > изображение.размытие {
фильтр: размытие(5пикс.)
}

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

Добавление других эффектов

Другими эффектами являются сдвиг текста слева, масштабирование изображения и добавление оттенков серого к изображению. Вот код для достижения всех трех эффектов:

.image-обертка > .содержание.slide-влево {
трансформировать: перевестиX(100%)
}
.image-обертка:наведите > .содержание.slide-влево {
трансформировать: перевестиX(0%)
}


.image-обертка:наведите > изображение.серый {
фильтр: оттенки серого(1)
}


.image-обертка:наведите > изображение.размытие {
фильтр: размытие(5пикс.)
}
.image-обертка:наведите > изображение.зум {
трансформировать: шкала(1.1)
}

Сохраните файл, затем перейдите в браузер и наведите указатель мыши на каждое изображение. Вы должны увидеть различные эффекты в действии.

Чтобы завершить эффекты вставки, вы можете создать еще три оболочки изображений, каждая из которых содержит изображение и текст. Каждый фрагмент текста будет иметь имя класса скользить вверх, скользить вниз, или легкий правый. Затем вы должны передать правильное значение в пиксель, em или rem, внутри трансформировать() для создания всех трех эффектов.

CSS Grid и Flexbox

CSS Grid и Flexbox — это две функции, которые позволяют создавать фантастические макеты для вашего сайта. Вы можете легко создать практически любой макет и настроить строки и столбцы по своему вкусу. Столбцы также будут адаптивными по умолчанию. Изучение того, когда использовать один над другим, поможет вам стать лучшим разработчиком CSS на один процент.