My image is positioned relatively for a CSS mouseover effect, allowing it to change when hovered over. Since my design is responsive, the image can adjust based on screen size.
Is there a way to place text next to this image without it displaying behind the image? I need help with adjusting my code!
The current issue is that the text ends up appearing behind the image rather than beside it. Any suggestions would be greatly appreciated. Thanks in advance!
CSS (for changing image on mouse-over):
#mypic {
position:relative;
max-width:100%;
}
#mypic img {
position:absolute;
left:0;
opacity:1;
-webkit-transition: opacity .3s ease-out;
-moz-transition: opacity .3s ease-out;
-o-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}
#mypic img.top:hover {
opacity:0;
}
HTML:
<div id="mypic"><img class="bottom" src="bottom.jpg" /><img class="top" src="top.jpg" /></div>
<p>Here is text that should be displayed to the right of the image.</p>