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.
<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>
image_2024-09-12_115731234.png
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:
.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;
}
Ok so I tried that and now the ad doesn't show up at all
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:
<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>
:D It's finally fixed.
This isn't fixed, it's off-centered. It looks horrible.
Quote from: Heidi on September 12, 2024, 12:40:54 PMThis 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.
Yeah so on mobile it looks horrible. It's too big for the screen.
Quote from: Jadedacat1976 on September 13, 2024, 10:23:49 PMYeah so on mobile it looks horrible. It's too big for the screen.
Did I fix it?