How to overlay when hovering over a link?

Question

Mozilla

It is necessary that when you hover over the link, a translucent overlay appears on top of the image. Is there any alternative to not have a bunch of overlay classes ? Because when there are not 3 such elements, but 10+, it seems to me that this is not the best option. For a better understanding of 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

Start Firefox from the command line with the -P switch, a window will open for selecting/creating a profile (you can also create them at about:profiles).
For example, under MacOS, the command looks like this:
/Applications/Firefox.app/Contents/MacOS/firefox -P
Create the number of profiles you need - each of them will have separate settings from the rest. Set the desired proxy in each and run multiple firefox profiles instead of multiple tabs.

Answer 2

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;
}