html - 在图像上创建悬停叠加层，但似乎无法使其大小正确？

Question

我正在尝试创建一些在图像上具有悬停叠加效果的卡片，但似乎无法使叠加层适合图像的大小。有人有什么想法吗？

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

感谢您的帮助!

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

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

Answer 1

添加显示: block ；到 img。

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

}