NFT preview card with basics

Community feedback

• 

  Radasin•620

  @RadasinPosted over 1 year ago

  Place an image inside an image: html<img class="img"><img class="overlay" /></img>

  css

  .overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2; 
  }
  
  .img:hover .overlay {
   display:block;
  } ```
  this should work i haven't tested it but it should work.
  

  1

  ---

  

  CRKNO•50

  @CriKnoPosted over 1 year ago

  @Radasin thank you so much!! I will try and I will tell you how it went.

  0

  

  Radasin•620

  @RadasinPosted over 1 year ago

  @CriKno I tested it it doesnt work. This works. You need to wrap the img in a container then set the container position to relative, overlay img to position absolute top: 0; left: 0;

  <div class="div">
        <img class="img" src="1.jpg" alt="">
        <img class="overlay" src="2.jpg" alt="">
  </div>
  
  .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: none;
      z-index: 2;
      opacity: 0.5;
  }
  .img {
      width: 600px;
     height: 600px;
  }
  .div {
      position: relative;
      width: 600px;
      height: 600px;
  }
  
  .div:hover .overlay {
      display:  block;
      max-width: 600px;
      height: 600px;
  }
  

  Marked as helpful

  1

  

  CRKNO•50

  @CriKnoPosted over 1 year ago

  @Radasin I have it! I used a div container and position absolute and it work, I also change the opacity of the main image and the result is the same as in the design. Thanks for your help, It helped me a lot!

  0