How to fix my ad code

[MoonWolf63]

So I'm trying to create an ad for my game and what I want it to do is when a user hovers over the image banner, it will fade the image out and fade in a gif that I made. All it does is fade out the image. Another weird part is that theres this odd huge border for it. I just want it centered and without the huge margin.

Code Select Expand

<style>
.hover-img .animated {
    transition: opacity 0.5s ease-in-out;
}

.hover-img:hover .static {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hover-img:hover .animated {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
</style>

<a href="https://mawstudios.com/index.php/mawbreaker/" class="hover-img">
    <img src="https://www.mawstudios.com/wp-content/uploads/2022/01/mawad-1-e1643755590654.png" alt="Static Image" class="static">
    <img src="https://www.mawstudios.com/wp-content/uploads/2023/02/ezgif.com-gif-maker.gif" alt="Animated Image" class="animated" style="opacity:0;">
</a>

[Kyle]

To fix your issue:

• Fade In/Out Issue: Your CSS is missing an initial opacity on the .animated image. Add opacity: 0; to ensure the GIF is invisible until hover.
• Huge Margin: Ensure the parent container and both images use position: absolute; or position: relative; to eliminate extra spacing and center the ad.

Here's an updated version of the CSS to try:

Code Select Expand

.hover-img {
    display: inline-block;
    position: relative;
}

.hover-img .static, .hover-img .animated {
    position: absolute;
    top: 0; left: 0;
}

.hover-img .animated {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hover-img:hover .static {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hover-img:hover .animated {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}


[MoonWolf63]

Ok so I tried that and now the ad doesn't show up at all

[Kyle]

If the ad isn't showing up at all after the changes, it could be due to the position: absolute causing both images to overlap or not display correctly. Try adding specific dimensions to the container and images:

Code Select Expand

<style>
.hover-img {
    display: inline-block;
    position: relative;
    width: 300px; /* Set the width for your ad */
    height: 200px; /* Set the height for your ad */
    overflow: hidden; /* Prevent overflow */
}

.hover-img .static, .hover-img .animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hover-img .animated {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hover-img:hover .static {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.hover-img:hover .animated {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
</style>

<a href="https://mawstudios.com/index.php/mawbreaker/" class="hover-img">
    <img src="https://www.mawstudios.com/wp-content/uploads/2022/01/mawad-1-e1643755590654.png" alt="Static Image" class="static">
    <img src="https://www.mawstudios.com/wp-content/uploads/2023/02/ezgif.com-gif-maker.gif" alt="Animated Image" class="animated">
</a>


[MoonWolf63]

It's finally fixed.

[Heidi]

This isn't fixed, it's off-centered. It looks horrible.

[MoonWolf63]

This isn't fixed, it's off-centered. It looks horrible.

Eh, maybe the very bottom one, but, the top one is perfect as its just under the title and date.

[Jadedacat1976]

Yeah so on mobile it looks horrible. It's too big for the screen.

[MoonWolf63]

Yeah so on mobile it looks horrible. It's too big for the screen.

Did I fix it?

[Jadedacat1976]

Yeah so on mobile it looks horrible. It's too big for the screen.

Did I fix it?

No, it's less but it's still fucked.