Jump to content

Add "move up a little" hover effect for images

Recommended Posts


I'd like to add a hovering effect to the images 1. on the blog summary on the homepage and 2. on the blog page (called "writing") to make my site more responsive.

I've seen an effect I'd like to try where the image with the text move up a little bit when you over over them, then move back when you remove the cursor. Is that possible?


pw: 2eRFn7gQ

Many thanks!

Edited by Aurora
Link to comment
1 hour ago, abibacon said:

Yep, we can add a transition property

.summary-v2-block .summary-item:hover {
  transform: translateY(-10px) !important;
  transition: 2s !important;


@abibacon I changed it to one second, and I love it! Thanks so much!

Would you be able to share the code for the blog page (called "writing" in the navigation) as well?

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.