画像とテキストのCSSカードオーバーレイ

Question

div /カード全体をカバーするオーバーレイを作成しようとしています。私は3枚のカードを持っています。何らかの理由で、div全体を選択することができません。

HTML：

<div class="item "> 
    <div class="overlay"> 
    <img src="http://placehold.it/600x350"> 
    <h2>Title</h2> 
    <p> Text</p> 
    </div><div class="overlay"> </div> 
    </div> 

とCSS：

.item { 

    padding: 0px 0; 
    margin: 1%; 
    border-radius: 2px; 
    flex: 1 250px; 
    height: auto; 
    text-align: center; 
    background: linear-gradient(0deg, #efefef, #ffffff); 
} 

.overlay { 
    position: relative; 
    background-color: rgba(0,0,0,0) 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 


.overlay:hover { 
    opacity: 1; 
    background-color: rgba(0,0,0,1); 

} 

CODEPEN EXAMPLE

Answer 1

div.itemが特定のサイズや形状を有しています。 relativeというようにスタイルを設定して、次のことがうまくいくようにします。

div.overlayposition:absolute - それはオーバーレイされますがサイズはないので見えません。

次に、div.overlayの親の全高（div.item）を作成します。

表示されるとき（ホバー）、それは100％高さ/幅の.itemになり、オーバーレイされます。

body {background-color: #C70025;} 
 

 
img {width: 100%;} 
 

 
#container {width:90%;margin:0 auto;display:flex;flex-wrap:wrap; 
 
justify-content:space-between;} 
 

 
.item {color:#000;padding:0px 0;margin:1%;border-radius:2px;flex:1 250px;height:auto;text-align:center;background:linear-gradient(0deg, #efefef, #ffffff);} 
 

 
.item{position:relative;} 
 
.overlay { 
 
    position:absolute; 
 
    top:0;left:0;right:0;bottom:0; 
 
    background-color: rgba(0,0,0,0) 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
.overlay:hover { 
 
    opacity: 1; 
 
    background-color: rgba(0,0,0,1); 
 

 
}

<div id="container"> 
 
    <div class="item "> 
 
     <img src="http://placehold.it/600x350"> 
 
     <h2>Title</h2> 
 
     <p> Text</p> 
 
     <div class="overlay"> </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/600x350"> 
 
     <h2> Title </h2> 
 
     <p>Text</p> 
 
     <div class="overlay"> </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/600x350"> 
 
     <h2> Title </h2> 
 
     <p>Text</p> 
 
     <div class="overlay"> </div> 
 
    </div> 
 
</div>