Change Image Shape on Hover - Squarespace Layout Engine & Fluid Engine Tutorial
A request from fellow Squarespace Circle Member RM-WB who was looking to replicate the lovely rollover hover transition used on Argyle Design's images.
Essentially it uses CSS to targe the image's container element and change the border-radius of the image on hover. This logic can be applied to all sorts of other transitions and effects.
I wasn't sure which version of Squarespace (7.0 or 7.1) and which editor (Layout Engine or Fluid Engine) was being used so I've aimed to create a solution that'll be applicable to all - and go through the thought process so that you're able to apply it in other ways too.
Reference site link:
https://argyledesign.info/
It'll work on any Squarespace plan and requires no additional libraries or scripts. It's pure CSS.
Feel free to ask any questions in the comments below, if you get stuck or want to know a bit more.
=============================================
If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :)
https://www.kwameand.co/say-thanks
Interested in more Squarespace tutorials, tips and tricks?
Why not visit the SquareSkills website for more content like this:
https://www.SquareSkills.dev
/ squareskills
/ squareskills
If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website:
https://www.kwameand.co/
/ heykwame
/ kwameand.co
Here's the code used in the video. You can modify the properties to tailor it to match your branding and style - or take it even further.
=============================================
Insert into CSS:
/***********************
Squareskills.dev
Change image shape on Hover
*******************************/
//Specific Blocks (LE/FE)
#BLOCKID img {
transition: border-radius 1s ease-out;
}
#BLOCKID:hover img {
border-radius: 500px;
}
//All Image Blocks (LE/FE)
.sqs-block-image img {
transition: border-radius 1s ease-out;
}
.sqs-block-image:hover .fluid-image-container:not([data-shape-mask]) img {
border-radius: 500px;
}
//Gallery Sections (7.1 ONLY)
.gallery-grid-item img {
transition: border-radius 1s ease-out;
}
.gallery-grid-item:hover img {
border-radius: 500px;
}
On this page of the site you can watch the video online Change Image Shape on Hover - Squarespace Layout Engine & Fluid Engine Tutorial with a duration of online in good quality, which was uploaded by the user SquareSkills - Custom Squarespace Tutorials 22 November 2022, share the link with friends and acquaintances, this video has already been watched 674 times on youtube and it was liked by 18 viewers. Enjoy your viewing!
