Jump to content

Avenue: Code injection to change index thumbnail images on hover

Recommended Posts

  • 5 months later...
On 10/25/2019 at 3:59 AM, uio504 said:

Hi,

I'm using the Avenue template and would like to have the Index thumbnail images change from a black and white image to a color image when you hover over them. Does anyone know the code to do this? I appreciate your help!

 

 

2 hours ago, JeremySnell said:

Also would love help with this!

You can try CSS. If you share link to your site, I can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
43 minutes ago, camilla.ciappina said:

Hey! i am using Avenue too and wanted to do the same as the requested above.

How can I do that please? I want the pepsi logo to become the colored version when hover the mouse. 

https://flugelhorn-oarfish-d3cj.squarespace.com/

password: Marcus

 

thank you!

First, add a colored pepsi logo, then share link again, I can give the code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I know about this code but it wll need your own element  id (that long number):

body#collection-563bea6ae4b0ccc59db69084 img {
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
   }
body#collection-563bea6ae4b0ccc59db69084 img:hover {
       -webkit-filter: none;
       filter: none;
   }

This site has quite a few hover tricks and how to do them: https://www.mybilliedesigns.com/blog/squarespace-customization-html-hover-effect

Edited by derricksrandomviews
Link to comment
25 minutes ago, camilla.ciappina said:

Just did it.

But i want it to go from off-white to colored logo. Not the way around. Is that possible?

thank you!

Try this CSS

a.project img {
    filter: grayscale(1);
}
a.project:hover img {
    filter: grayscale(0);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.