Oishik Biswas

Latest comments

• 

  Daniel•1,190

  @Ghravitee

  Submitted almost 3 years ago

  

  HTML5 and CSS3

  2

  20
  

  Oishik Biswas•70

  @pippal5536

  Posted almost 3 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