Second image on hover

Lovasa
Excursionist
35 0 3

Hello!

I am using the Debut theme, I want a second image on hover effect on my homepage, but not the product image, I want to make a section with a collection of something and have an image there that when you hover over it, it shows another one.

 

Thank you very much!

0 Likes

Hi, @Lovasa 

In case you're unable to find a solution, this can potentially help you out. It's a copy/paste code snippet that adds the second image on hover with customization options. Just thought I'd let you know of this possibility.

Wishing you all the best!

Kind regards,
Diego

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
Lovasa
Excursionist
35 0 3

Hey! Thank you very much for the reply!

I have seen other solutions ( and a bunch of free ones ) similar to what you've shown me, but I do need a way to make second image on hover on any image on my store, not just for the products themselves.

But thank you again for your kindness!

0 Likes

@Lovasa 

No problems, I'm happy to take a look. What is your website's URL?

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes
Lovasa
Excursionist
35 0 3

Hey! I have solved my issue!

 

I am using PageFly, they have an option on adding custom HTML/Liquid code, I just added this type of element in place of the image holder, and used this code:

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Swap on Hover with CSS</title>
<style>
    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }
</style>
</head>
<body>
    <div class="card">
        <img src="images/card-back.jpg" alt="Card Back">
        <img src="images/card-front.jpg" class="img-top" alt="Card Front">
    </div>
</body>
</html>

 

Then, I just replaced the images URLs with mines and resized them to fit properly and now it works like a charm, thank you very much!