Crossfading image hides other elements - html

Question

I'm trying to make two images crossfade when you hover over them, and it works besides the fact that it hides the text I need. The text should be under the image instead of behind it. How can I fix this?
#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>

Answer 1

Give #crossfade width & height.
#center {
text-align: center;
}
#under {
text-align: center;
margin: 0;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
#crossfade {
position: relative;
width: 500px;
height: 330px;
}
#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>