Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
uio504

Avenue: Code injection to change index thumbnail images on hover

Question

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!

 

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 1
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);
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...