Отображение текста при наведении курсора в Squarespace // Учебное пособие по Squarespace — эффект...

Наведите курсор на изображение — увидите текст. Звучит просто, правда? Что ж, благодаря CSS, это действительно так. Этот урок научит вас, как создать этот эффект при наведении курсора в Squarespace.

- -
Узнайте больше о пользовательском коде для Squarespace в моём бесплатном уроке по ссылке https://insidethesquare.co/learn
- -

Этот урок научит вас, как создать эффект при наведении курсора на изображение, который будет показывать текст. Он предназначен для последней версии Squarespace, известной как 7.1, и не будет работать в более старых версиях, основанных на 7.

Этот урок состоит из пяти основных шагов:
Шаг 1: Добавьте изображение
Шаг 2: Добавьте текст
Шаг 3: Получите идентификатор текстового блока
Шаг 4: Настройте код ниже
Шаг 5: Отредактируйте мобильное представление, поскольку при наведении курсора нет, поэтому нам нужно сделать это представление привлекательным!

Вот расширение для Chrome, о котором я упоминаю в видео. Я не связан ни с этим, ни с его создателями, просто фанат: https://chrome.google.com/webstore/de...

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

@media only screen and (min-width: 640px){
#block-12345 {
opacity: 0;
transition: opacity 1s
}

#block-12345:hover {
opacity: 1;
Переход: непрозрачность 1 с
}
}

- -
💸 ПОЛУЧИТЕ СКИДКУ 10% НА ПЕРВЫЙ ГОД ПОДПИСКИ НА SQUARESPACE 💸
Используйте мою партнёрскую ссылку и код PARTNER10 — вы сэкономите 10% на первой годовой подписке, а Squarespace заплатит мне небольшую комиссию за то, что я вас к ним привлечу 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
- -
🤩 Скачайте более 100 страниц пользовательских кодов и профессиональных советов по настройке Squarespace в одном потрясающем PDF-файле. Закажите шпаргалку по CSS для Squarespace, которая уже доступна по адресу 👉 https://insidethesquare.co/css
---
🙋 Нужна помощь? Посетите ​https://insidethesquare.co/code-help​, чтобы узнать о моих текущих вариантах поддержки. ---
🥰 ПОДДЕРЖИТЕ МОЙ КАНАЛ → https://paypal.me/insidethesquare
💻 САЙТ → https://insidethesquare.co
📧 РАССЫЛКА → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare  
👍 FACEBOOK →   / insidethesquare  
📌 PINTEREST →   / insidethesquare  
---