Jump to content

Make Blog Thumbnails Zoom In on Hover?

Go to solution Solved by Ziggy,

Recommended Posts

I have a basic grid blog. I'd like the image thumbnails to zoom in slightly on hover while the outer size of the thumbnail remains the same. My current code grows the entire size of the image instead of keeping the outer box the same size while zooming in. I'd greatly appreciate it if anyone could help tweak my code accordingly!

My blog page is https://www.glassworkpixie.com/blog/studio-journal

Below is my current CSS:

.blog-basic-grid .image-wrapper {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

.blog-basic-grid .image-wrapper:hover {
-webkit-transform: scale(1.1); /* Safari and Chrome */
-moz-transform: scale(1.1); /* Firefox */
-ms-transform: scale(1.1); /* IE 9 */
-o-transform: scale(1.1); /* Opera */
transform: scale(1.1); /* W3C */
}

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Try this adjustment:

.blog-basic-grid .image-wrapper img {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.blog-basic-grid .image-wrapper img:hover {
  -webkit-transform: scale(1.1); /* Safari and Chrome */
  -moz-transform: scale(1.1); /* Firefox */
  -ms-transform: scale(1.1); /* IE 9 */
  -o-transform: scale(1.1); /* Opera */
  transform: scale(1.1); /* W3C */
}

This should now apply to the image rather than the image wrapper. Let me know how that goes!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, GlassworkPixie said:

That worked perfectly! Thank you so much, I really appreciate it!

Happy to help! Thanks for marking it as the solution, can you give it a like too? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.