Jump to content

Avenue: Code injection to change index thumbnail images on hover

Recommended Posts

  • 5 months later...
  • Replies 7
  • Views 674
  • Created
  • Last Reply
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.