All comments

Daniel•1,010

@GhraviteeSubmitted about 2 years ago

I'd like to know if the "overlay" method is the only way to achieve the hover effect on the image.

HTML5 and CSS3

Oishik Biswas•70

@pippal5536Posted about 2 years ago

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!