user4316754 user4316754 - 6 months ago 15
HTML Question

Div Children Not Listening to CSS When Position Absolute

I'm trying to place text behind an image and have it so that when I hover, the image disappears and only the text behind it is visible. But I came across a problem where the text isn't listening to the div because all the child divs are set to position absolute. What alternative solutions are there?

.card {
display:block;
width:255;
height:319;
border-radius:1px;
overflow:hidden;
word-wrap: break-word;
}
.card * { position:absolute; } //issue here code makes text come out of div card itself
.card img:hover { opacity:0; }

<div class='card'>
<p>Title</p><p>2016</p>
<p>Description , lots of image description</p>
<img src="./img/image1.jpg" width="225" height="319">
</div>

Answer

You can assign:

position:relative;

to .card to keep the text within the div.

Comments