Jump to content

Custom hover animation for projects on portfolio gallery page

Go to solution Solved by tuanphan,

Recommended Posts

Hi there. 

So I would like to use custom CSS to add a little scale-up animation to the title and feature image when I hover over portfolio projects.

Currently, I have managed to code it so that the text scales up when I hover over the text but I would like it to do so when I hover over the project image/overlay as a whole - not just when I hover over the ".portfolio-title". This is the code driving the current animation. I am happy with the easing. 

//--- SCALE PORTFOLIO TEXT ---//
h3.portfolio-title  { transition: all 1s cubic-bezier(0,.2,0,1)
}
.portfolio-title:hover  { transform: scale(1.05);
}

How would I also get this same effect on the portfolio image too? I would like to have control of this too. 

https://ryz-2023.squarespace.com/work
PW: test

Thanks!

Edited by adzrozanski
Link to comment
  • 2 weeks later...
  • Replies 3
  • Views 274
  • Created
  • Last Reply

Top Posters In This Topic

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.