Скачать с ютуб How to create custom hover effects in Squarespace // Squarespace Hover Effect Tutorial в хорошем качестве

How to create custom hover effects in Squarespace // Squarespace Hover Effect Tutorial

🚨 This video got a MAJOR upgrade in 2024 - check out the latest version here:    • Squarespace Hover Effects: how to cre...   - - Hover effects are a great way to encourage interaction on your site, and thanks to CSS, they are super easy to create in Squarespace! This tutorial will teach you how. In this video, you’ll learn how to create your own hover effects for Squarespace. I’ll show you how to create a basic hover code that changes a button color on a hover, adds a filter to an image on a hover, and how to use item hierarchy to create a hover effect for list items. I am using version 7.1 in this tutorial, but the code concept works for older versions too. Here are the codes from this tutorial. Change a standard button background color on a hover: .sqs-block-button-element:hover{ background-color: red!important } Add a filter to an image on a hover: .sqs-block-image:hover { filter: grayscale(1) } Change a list item button color on a list item hover: .list-item:hover .list-item-content__button { background-color: red!important } - - 🔗 Related Links 🔗 More Squarespace hover effect tutorials: https://insidethesquare.co/hover-effects Creating borders with code: https://insidethesquare.co/borders Learn about color codes: https://insidethesquare.co/colors Squarespace Fluid Engine: https://insidethesquare.co/fluid - - 🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css - - 💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 PARTNER10 → https://insidethesquare.co/partner10 - - 🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options. - - 🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare 💻 WEBSITE → https://insidethesquare.co 📧 NEWSLETTER → https://insidethesquare.co/email 🤳 INSTAGRAM →   / thinkinsidethesquare   👍 FACEBOOK →   / insidethesquare   📌 PINTEREST →   / insidethesquare   ---