How to achieve a second image hover effect in Debut theme?

Lovasa · ‎09-21-2021

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!

diego_ezfy · ‎09-21-2021

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

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

Lovasa · ‎09-22-2021

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!

diego_ezfy · ‎09-22-2021

@Lovasa

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

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

Lovasa · ‎09-22-2021

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!

How to achieve a second image hover effect in Debut theme?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links