Div Дети не прослушивают CSS Когда позиция Absolute

Question

Я пытаюсь разместить текст за изображением и сделать так, чтобы при наведении курсора изображение исчезло, и только текст позади него виден. Но я столкнулся с проблемой, когда текст не прослушивает div, потому что все дочерние divs устанавливаются как абсолютные. Какие альтернативные решения существуют?

.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 1

Вы можете назначить:

position:relative; 

в .card, чтобы сохранить текст в пределах дел.