Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 insidethesquare.co/learn
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquare.co/partner10
---
💕 Love this free Square space tutorial? You can donate via Paypal to help support my KZitem Channel www.paypal.com/paypalme/insid...
---
This tutorial is in my Squarespace, 7.1 demo site but it works for Squarespace 7 sites like Brine and Bedford too.
In this tutorial, I will show you how to create a zoom-in hover effect for on-page images in Squarespace. This code works for both Squarespace 7 and 7.1 This tutorial is specifically for on-page images, not galleries or products, those have different “code names” in CSS so I am covering them in different tutorials. There are 6 main types of images, and all of them can be edited individually.
Now all of the effects we are creating today are done with a little custom css magic and I will walk you through it step by super simple step in this video. The codes we are using are below, but be sure to watch the whole tutorial so you understand how to use them!
//--Image Types
.sqs-block-image .design-layout-inline
.sqs-block-image .design-layout-poster
.sqs-block-image .design-layout-card
.sqs-block-image .design-layout-overlap
.sqs-block-image .design-layout-collage
.sqs-block-image .design-layout-stack
//--Zoom on hover
img:hover {transform: scale(1.1);}
//--Smooth zoom transition
img:hover {transform: scale(1.1); transition: .4s;}
img{transform: scale(1); transition: .4s;}
/--Zoom out on hover
img {transform: scale(1.1); transition: .4s;}
img:hover {transform: scale(1); transition: .4s;}
Don’t forget “overflow:hidden” from the 4:45 minute mark!
-----
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 InsideTheSquare.co/css
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquare.co/partner10 ❤️ #winwin
---
🙋 Need some help? Visit insidethesquare.co/code-help to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
Негізгі бет Image zoom on hover in Squarespace - both Squarespace 7 & Squarespace 7.1
Пікірлер: 68