Image blocks have a ton of built-in design features, but I wanted to use a little CSS to make them a bit more colorful, so that’s what we’re covering in this tutorial… literally. I’ll teach you how to cover an image with a solid color, and a gradient, and you’ll learn how to turn it into a hover effect.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
The codes in this video will work in both versions of Squarespace, making any image block look even more awesome. Be sure to get creative with the colors and direction of your gradient codes, and head on over to https://insidethesquare.co/gradients to grab my free PDF with premade gradient codes you can use on your site.
– – –
Here is the code from this tutorial; be sure to adjust the selector for the image you are targeting, the colors, gradient, and transition time to match your site style!
Want to target one image? Check out this video for info on how to target one thing in Squarespace with a block id: https://youtu.be/h8qfZdaATbU
/* Poster Image */
.design-layout-poster .image-overlay { background: blue!important; opacity: .8;}
/* Poster Image Gradient */
.design-layout-poster {
background: linear-gradient(to right, red, blue);
opacity: .8;
transition: 2s
}
/* Poster Image Hover Effect */
.design-layout-poster:hover .image-overlay {
background: blue!important;
opacity: .8;
transition: 2s
}
.design-layout-poster .image-overlay {
opacity:0;
transition: 2s
}
– – –
🔗 RELATED VIDEOS 🔗
How to create gradient text in Squarespace: https://youtu.be/x3-yBCVUlvs
How to Add An Animation Style to An Image in Squarespace 7.1: https://youtu.be/RJHqqoh_dUk
How to use new image shapes in Squarespace: https://youtu.be/RJHqqoh_dUk
– – –
💸 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 60+ 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
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
