Jump to content

Customise portfolio thumbnails on hover to new image

Recommended Posts

1 hour ago, meego92 said:

Hi team,

 

im a CSS newb and I want to customise each portfolio thumbnail on hover to a different image. 

 

Any tips?

 

Meego92

 

 

Here is the code. You can change the hover image by change image.

.project:nth-child(1):hover img{
    content: url(https://images.squarespace-cdn.com/content/v1/655ba5d1b8782e4e1ac25000/1701441110104-4AHRWBN92HLAKY20O4L1/1380.jpg?format=750w);
    object-fit: cover;
}

.project:nth-child(2):hover img{
    content: url(https://images.squarespace-cdn.com/content/v1/655ba5d1b8782e4e1ac25000/1700857561046-CJ0T6S9GEUHVYGB8609H/20yearsofjoe.jpg?format=750w);
    object-fit: cover;
}

.project:nth-child(3):hover img{
    content: url(https://images.squarespace-cdn.com/content/v1/655ba5d1b8782e4e1ac25000/1700857561046-CJ0T6S9GEUHVYGB8609H/20yearsofjoe.jpg?format=750w);
    object-fit: cover;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.