All comments

• 

  Daniel• 860

  @Ghravitee

  Submitted 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

  2

  20

  

  Oishik Biswas• 70

  @pippal5536

  Posted 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!

  0