Как сделать overlay при наведении на ссылку?

Нужно, чтобы при наведении на ссылку, сверху картинки появлялся полупрозрачный оверлей. Есть какая-то альтернатива, чтобы не городить кучу классов overlay? Потому, что когда таких элементов не 3, а 10+ мне кажется это не лучший вариант. Для лучшего понимания jsfiddle.net

<div class="block">
	<a href="#" class="card-one">
    <div class="overlay"></div>
		<img src="https://goo.gl/X6c6dy" width="265" height="265" alt="">
	</a>
	<a href="#" class="card-two">
    <div class="overlay"></div>
		<img src="https://goo.gl/h6UhHS" width="265" height="265" lt="">
	</a>
	<a href="#" class="card-three">
    <div class="overlay"></div>
		<img src="https://goo.gl/MuPSbt" width="530" height="265" alt="">
	</a>
</div>

.block {
  font-size: 0;
	width: 530px;
	height: 530px;
}
a.card-one,
a.card-two,
a.card-three {
  display: inline-block;
}

a.card-one:hover .overlay,
a.card-two:hover .overlay {
  position: absolute;
	width: 265px;
	height: 265px;
	background: rgba(0,0,0,.6);
}
a.card-three:hover .overlay {
  position: absolute;
	width: 530px;
	height: 265px;
	background: rgba(0,0,0,.6);
}

jsfiddle.net