Pb image hover effect

[antoine_generau]

Hello,

I try to change an image on mouse hover using a background image. This is somehow not working correctly (the image disappears). Could you please help me to fix it?

The code in my footer:
<a href="https://www.facebook.com/ghara.construction/" target="_blank" class="fb-hover"><img src="/wp-content/uploads/2019/05/Icone-facebook-ghara.png" alt="Icone Facebook" class="fb-hover"></a>

The CSS:
.fb-hover {
background:url(/wp-content/uploads/2019/05/Icone-facebook-hover.png) no-repeat;
transition: 0.25s all ease-in-out;
}

.fb-hover:hover {
  opacity: 0;
  transition: 0.25s all ease-in-out;
}

URL: http://preprod.ghara.fr/

[jade]

Hi @Lecoqdigital,

Please make the following changes:

#1. Change the FB link code to:

<a href="https://www.facebook.com/ghara.construction/" target="_blank" class="fb-hover">
    <img src="/wp-content/uploads/2019/05/Icone-facebook-ghara.png" alt="Icone Facebook" class="">
</a>

Basically, just remove the class fb-hover to the image.

#2. Then update the CSS to:

.fb-hover {
    background: url(/wp-content/uploads/2019/05/Icone-facebook-hover.png) no-repeat;
    transition: 0.25s all ease-in-out;
    height: 27px;
    width: 27px;
    display: inline-block;
}

.fb-hover:hover img {
    opacity: 0;
    transition: 0.25s all ease-in-out;
}

Hope this helps.

[antoine_generau]

Thank you!

[lely]

You’re always welcome @Lecoqdigital!

Cheers.