Reveal Text on Hover in Squarespace // Squarespace Tutorial - Fluid Engine Hover Effects

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 known as 7.1 and wont work for older versions built on 7. 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/de... 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 →   / thinkinsidethesquare   👍 FACEBOOK →   / insidethesquare   📌 PINTEREST →   / insidethesquare   ---