MAWStudios

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

Oh thats because im terrible at web development

Quote from: MoonWolf63 on March 22, 2023, 07:53:54 AMOh thats because im terrible at web development

I could try and fix it if you want.

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
<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>

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


Quote from: Heidi on June 02, 2024, 11:17:23 PMWolf, 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

Quote from: MoonWolf63 on July 12, 2024, 09:51:34 PM

Quote from: Heidi on June 02, 2024, 11:17:23 PMWolf, 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

Quote from: Heidi on July 12, 2024, 09:54:43 PM

Quote from: MoonWolf63 on July 12, 2024, 09:51:34 PM

Quote from: Heidi on June 02, 2024, 11:17:23 PMWolf, 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.

Try this then

<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>

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