HTML5 and CSS3

I used the hover effect like this: html:

      <img src="./images/image-equilibrium.jpg" alt="image of an equilibrium">
      <div class="hover-image">
        <img src="./images/icon-view.svg" alt="">
      </div>
    </figure>

CSS:

.card-image,
.card-image>img {
    width: 100%;
    border-radius: 1rem;
    height: 18rem;
}

.card-image {
    position: relative;
}
.hover-image {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: aqua;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    opacity: 0;
}
.hover-image:hover {
    background-color: hsla(178, 100%, 50%, 60%);
    cursor: pointer;
    opacity: 1;
}

I hope this helps!

The overlay method is a simple way to get the effect, it's even the recommended method on W3Schools so there is no harm in it. I'd say the cleanest way is probably using either the :before or :after pseudo-element to avoid having another element.

Here's a handy article on how to achieve that from 30secondsofcode.