Add "move up a little" hover effect for images

Hi!

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?

https://www.kristinkuehn.com/

pw: 2eRFn7gQ

Many thanks!

Hey @Aurora, try the below CSS for the summary block

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

28 minutes ago, abibacon said:

Hey @Aurora, try the below CSS for the summary block

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

 

Thank you @abibacon Is it possible to have this happen more slowly?

45 minutes ago, Aurora said:

Thank you @abibacon Is it possible to have this happen more slowly?

Yep, we can add a transition property

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

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?