Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Thurstings

Avenue Template - Thumbnail Hover code

Question

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!

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 1

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


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1
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;
}

 


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

How to Setup Password & Share URL  Armadillo - Free portfolio template

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