Your ad is messed up

[Jadedacat1976]

This ad is a bit messed up, when you hover it puts a slightly off gif to the side.

[MoonWolf63]

Oh thats because im terrible at web development

[Angela]

Oh thats because im terrible at web development

I could try and fix it if you want.

[Heidi]

Wolf, your hover effect is a joke. Instead of showing the GIF beside the image, you should swap the image with the GIF on hover. Here's how you can fix it:

Use this for the HTML

Code Select Expand

<a href="#" class="hover-img">
    <img src="static-image.png" alt="Static Image" class="static">
    <img src="animated-image.gif" alt="Animated Image" class="animated" style="display:none;">
</a>


Code Select Expand

.hover-img:hover .static {
    display: none;
}
.hover-img:hover .animated {
    display: inline;
}


[MoonWolf63]

Wolf, your hover effect is a joke. Instead of showing the GIF beside the image, you should swap the image with the GIF on hover. Here's how you can fix it:

Use this for the HTML

Code Select Expand

<a href="#" class="hover-img">
    <img src="static-image.png" alt="Static Image" class="static">
    <img src="animated-image.gif" alt="Animated Image" class="animated" style="display:none;">
</a>


Code Select Expand

.hover-img:hover .static {
    display: none;
}
.hover-img:hover .animated {
    display: inline;
}


I tried this but it just caused a bunch of glitchiness

[Heidi]

Wolf, your hover effect is a joke. Instead of showing the GIF beside the image, you should swap the image with the GIF on hover. Here's how you can fix it:

Use this for the HTML

Code Select Expand

<a href="#" class="hover-img">
    <img src="static-image.png" alt="Static Image" class="static">
    <img src="animated-image.gif" alt="Animated Image" class="animated" style="display:none;">
</a>


Code Select Expand

.hover-img:hover .static {
    display: none;
}
.hover-img:hover .animated {
    display: inline;
}


What kind of glitchiness?

I tried this but it just caused a bunch of glitchiness

[MoonWolf63]

Wolf, your hover effect is a joke. Instead of showing the GIF beside the image, you should swap the image with the GIF on hover. Here's how you can fix it:

Use this for the HTML

Code Select Expand

<a href="#" class="hover-img">
    <img src="static-image.png" alt="Static Image" class="static">
    <img src="animated-image.gif" alt="Animated Image" class="animated" style="display:none;">
</a>


Code Select Expand

.hover-img:hover .static {
    display: none;
}
.hover-img:hover .animated {
    display: inline;
}


What kind of glitchiness?

I tried this but it just caused a bunch of glitchiness

Well it keeps repeatedly disappearing without actually showing the gif. So it just makes the image disappear, shows nothing, then glitches because nothing is showing then brings the image back. And it keeps doing that.

[Heidi]

Try this then

Code Select Expand

<a href="#" class="hover-img">
    <img src="static-image.png" alt="Static Image" class="static">
    <img src="animated-image.gif" alt="Animated Image" class="animated" style="opacity:0;">
</a>


Code Select Expand

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