Jump to content

Avenue Template - Thumbnail Hover code

Recommended Posts

Site URL: https://www.studioshaw.co.uk/

Hello community,

My client currently uses the Avenue template and has a series of blue icons for projects at the bottom of their page. Currently, with the Avenue template when users hover over these icons a blue opacity box overlays the image - Does anyone know any code that would replace the blue opacity box with an alternative image on the avenue template? 

So instead of a blue box overlay appearing when users hover it would display an alternative image that I set.

Let me know if anyone can help code this.

T!

Link to comment
  • Replies 3
  • Views 975
  • Created
  • Last Reply

There are two ways to do this.

W1. Use CSS. 

29 images need 29 codes. 

Here is code for first image

/* remove blue background - this code apply for all images */
.project:hover .project-image {
    background: transparent !important;
}
/* set new image on hover - first icon */
a.project:nth-child(1):hover img {
    visibility: hidden;
}
a.project:nth-child(1):hover .content-fill {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Repeat code for other items

W2. Use JavaScript.

Create a Gallery Block with 29 images. Then use JavaScript to create the change-image-on-hover effect and connect to these 29 images. When you want to change a hover-image, just change the image in the Gallery Block.

This will allow you/your clients to easily add/edit photos, but it takes time to code (takes 1-2 hours), and it is outside the scope of free support.

And especially, it can work on both desktop - mobile. Ie when you touch the image, hover image will appear. 

I did this for 2 clients ✌️

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

@tuanphan Legend! This is great.

I have been trying to make the transition from one image to the other smoother instead of a sudden change, but I am having difficulty figuring this out. Do you know where I can add code to make this a smoother transition? 

I've been trying to paste code I have from previous hover transitions but it isn't working for me. Any idea?

Link to comment
7 hours ago, Thurstings said:

@tuanphan Legend! This is great.

I have been trying to make the transition from one image to the other smoother instead of a sudden change, but I am having difficulty figuring this out. Do you know where I can add code to make this a smoother transition? 

I've been trying to paste code I have from previous hover transitions but it isn't working for me. Any idea?

a.project img {
    transition: all 0.75s;
}

 

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.