位置が絶対位置のときに子供たちがCSSを聴いていない

Question

私は、画像の後ろにテキストを置いて、マウスを動かすと画像が消え、その背後のテキストだけが見えるようにしています。しかし、すべての子divが絶対的な位置に設定されているので、テキストがdivを聴いていないという問題が発生しました。どのような代替ソリューションがありますか？

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

をdiv要素内のテキストを保つために.cardします。