HTML5 and CSS3

Community feedback

• 

  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!

  0
• 

  Joshua Hellard•545

  @jhellardPosted about 2 years ago

  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.

  0