Hover over an image – see some text. Sounds simple right? Well thanks to CSS, it totally is. And this tutorial will teach you how to create that hover effect in Squarespace.
– – –
Learn more about custom code for Squarespace in my free class at https://insidethesquare.co/learn
– – –
This tutorial will teach you how to create a hover effect that shows text when you hover over an image. It’s for the latest version of Squarespace, but if you are using an older version, or you want this effect in a blog post, check out this tutorial: https://insidethesquare.co/squarespace-tutorials/rotating-image-card
There are five main steps to this tutorial:
Step 1: Add the image
Step 2: Add the text
Step 3: Grab the text block ID
Step 4: Customize the code below
Step 5: Edit the mobile view, because there is no cursor on a hover, so we need to make this view look great!
Here is the chrome extension I mention in the video. I am not associated with it or its creators, just a fan: thttps://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Here is the code tutorial. Be sure to change up the block ID so it’s the same one as your text block, and feel free to change the transition timing!
@media only screen and (min-width: 640px){
#block-12345 {
opacity: 0;
transition: opacity 1s
}
#block-12345:hover {
opacity: 1;
transition: opacity 1s
}
}
– – –
💸 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
– – –
🤩 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
—
🙋 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 → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
