Эффекты наведения при наведении на изображение в галерее Squarespace // Эффекты наведения при нав...

Squarespace предлагает интересную функцию под названием «Разделы галереи» для демонстрации нескольких изображений в одном разделе вашего сайта. Благодаря креативному CSS мы можем добавлять к этим изображениям уникальные эффекты наведения!

В этом уроке вы узнаете, как добавить эффект наведения с помощью фильтров изображений. Список фильтров изображений можно найти в этой статье в моём блоге: https://insidethesquare.co/image-filters

Важная информация: этот урок предназначен для Squarespace версии 7.1 и не будет работать в более старых версиях. Подробнее на странице https://insidethesquare.co/themes.

Вот классы селекторов разделов галереи по типам:

*Сетка: простая*
.gallery-grid-item img

*Сетка: полосы*
.gallery-strips-item img

*Сетка: каменная*
.gallery-masonry-item img

*Слайд-шоу: простое*
.gallery-slideshow-item img

*Слайд-шоу: полное*
.gallery-fullscreen-slideshow-item img

*Слайд-шоу: рулон*
.gallery-reel-item img

Вот основной код из урока:

.gallery-grid-item img{
filter:grayscale(1)blur(2px);
Переход: фильтр 1s
}

.gallery-grid-item img:hover{
Фильтр: оттенки серого (0)
}

Больше подобных креативных кодов вы найдёте в моей коллекции кодов Squarespace по адресу http://insidethesquare.co/css

Похожие материалы:
📝 Оригинальная запись в блоге → https://insidethesquare.co/squarespac...
🌠 Статья о фильтрах изображений → https://insidethesquare.co/image-filters
❤️ Поддержите мой канал → https://buymeacoffee.com/insidethesquare
📖 Изучите CSS БЕСПЛАТНО → https://insidethesquare.co/learn
1️⃣ Примените этот код к одному разделу → https://insidethesquare.co/resources/...
📑 Моя коллекция кодов Squarespace → https://insidethesquare.co/css
🙋‍♀️ Есть вопросы? Ознакомьтесь с моими советами по устранению неполадок с кодом → https://insidethesquare.co/code-help
- -
Термин «Squarespace» является товарным знаком Squarespace, Inc. Это видео не было одобрено или одобрено Squarespace, Inc. Мне просто очень нравится их платформа ♥ #SquarespaceTutorial #CustomCode #WebsiteDesign #SquarespaceTips #WebDevelopment #VideoCollection #CreativeDesign #OnlinePresence #Squarespace7.1 #WebDesignInspo #DIYWebsite #TutorialTuesday #ContentCreation