NFT Preview

Community feedback

• 

  imad•3,330

  @imadvvPosted about 1 year ago

  Greeting Diana Jordan! Congratulations for completing your challenge!, 👏👏👏.

  they is a lot of ways to archive this overly effect, this is good resource from w3school, and also this blog post has some good information, but I did some changes to your code to make it function,

  html

      <div class="images">
        <img src="images/image-equilibrium.jpg" alt="equilibrium" class="image-first">
      </div>
  
  

  css

  
  main .images{
      position: relative;
      background-color: rgb(139, 213, 218);
      border-radius: 10px;
      z-index: 1;
      overflow: hidden;
  }
  
  .image-first{
      max-width: 100%;
      transition: opacity 200ms ease-in-out;
  }
  .images::after{
    content: "";
    position: absolute;
    background-image: url("./images/icon-view.svg");
    background-position: center;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 250ms ease-in-out;
  }
  
  .images:hover .image-first{
    opacity: .2;
  }
  .images:hover::after {
    opacity: 1;
    visibility: visible;
    scale: 1;
  }
  
  
  

  this implementation uses css pseudo-elements, I Hope this give you some hints or tricks after all good attempt, keep coding

  Marked as helpful

  0