Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue?
#center {
text-align: center;
}
#under {
text-align: center;
margin: 0;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
#crossfade {
position: relative;
}
#crossfade img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#crossfade img.top:hover {
opacity: 0;
}
img {
margin-right: 3%;
max-width: 65%
}
#goofy {
margin: 0;
margin-bottom: 40px;
}<div id="center">
<div id="crossfade">
<img id="goofy" src="https://inpulse.eli328.repl.co/half.png" alt="half" class="bottom">
<img id="goofy" src="https://inpulse.eli328.repl.co/active.png" alt="active" class="top">
</div>
<p id="under">
The Inpulse creates a powerful electric charge that when reaching sufficient levels, creates a bright arc of lightining between the two prongs. The handheld device will definitely satisfy its user.
</p>
</div>