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

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

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

@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

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.