イメージにホバーオーバーレイを作成しましたが、正しいサイズに見えませんか？

Question

イメージにホバーオーバーレイ効果を持つカードをいくつか作成しようとしていますが、イメージのサイズに合わせてオーバーレイを取得できないようです。誰もがアイデアを持っていますか？あなたの助けのための

http://codepen.io/SRBET/pen/peXooX

ありがとう！

.flexWrapper { 
 
\t max-width: 1280px; 
 
\t margin: 0 auto; 
 
\t 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
\t justify-content: center; 
 
} 
 
.card { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t margin: 5px; 
 
\t max-width: 400px; 
 
\t height: auto; 
 
\t box-shadow: 1px 3px 16px -5px rgba(0,0,0,0.75); 
 
\t transition: 0.1s ease-in-out; 
 
} 
 
.card:hover { 
 
\t box-shadow: 1px 3px 16px 0px rgba(0,0,0,0.75); 
 
} 
 
.card img { 
 
\t max-width: 100%; 
 
\t max-height: 100%; 
 
} 
 
.overlayContainer { 
 
\t position: relative; 
 
\t max-height: 100%; 
 
\t max-width: 100%; 
 
} 
 
.overlay { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t width: 100%; 
 
\t background-color: rgba(0,0,0,0.5); 
 
\t opacity: 0; 
 
\t transition: 0.5s ease; 
 
} 
 
.overlay:hover { 
 
\t opacity: 1; 
 
} 
 
.overlayText { 
 
\t color: white; 
 
\t 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t margin-right: 50%; 
 
\t transform: translate(-50%, -50%); 
 
} 
 
.card h1 { 
 
\t font-size: 1rem; 
 
\t margin: 2.5px; 
 
\t padding-bottom: 5px; 
 
} 
 
.card p { 
 
\t margin: 2.5px; 
 
}

<div class="flexWrapper"> 
 
\t \t 
 
\t \t <div class="card"> 
 
\t \t \t <div class="overlayContainer"> 
 
\t \t \t <div class="overlay"><h1 class="overlayText">Lorem Ipsum</div> 
 
\t \t \t <img src="http://placehold.it/640x320"> \t 
 
\t \t \t </div> 
 
\t \t \t <h1>Lorem Ipsum</h1> 
 
\t \t \t <p>Lorem ipsum dolor...</p> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="card"> 
 
\t \t \t <div class="overlayContainer"> 
 
     <div class="overlay"><h1 class="overlayText">Lorem Ipsum</h1></div> 
 
\t \t \t <img src="http://placehold.it/640x320"> 
 
\t \t \t </div> 
 
\t \t \t <h1>Lorem Ipsum</h1> 
 
\t \t \t <p>Lorem ipsum dolor...</p> 
 
\t \t </div> 
 
\t \t 
 
    </div>

Answer 1

表示を追加します：ブロックを。 imgに

.card img { 
    max-width: 100%; 
    max-height: 100%; 
    display:block; 

}