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

Question

[d3_dx]

Нужно, чтобы при наведении на ссылку, сверху картинки появлялся полупрозрачный оверлей. Есть какая-то альтернатива, чтобы не городить кучу классов 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

Answer 1

[Сергей Горячев]

a {
  position: relative;
}
a:before {
  content: '';
  position: absolute;
	background: rgba(0,0,0,.6);
  opacity: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
a:hover:before {
  opacity: 1;
}

Comments

[d3_dx]

То, что нужно. Спасибо)

[Сергей Горячев]

d3_dx, рад был помочь)