Avenue Template - Thumbnail Hover code

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!

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 ✌️

@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?

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;
}