NFT Preview Card Component

Community feedback

• 

  John Omoke•240

  @jomoke814Posted about 2 years ago

  Hello, @Snorri967 the best way to solve your problem will be to wrap your image that's equilibrium-view and equilibrium-image to one div like so:

  <div class="image-equil"> <img src="images/image-equilibrium.jpg" alt=""> <div class="img-overlay"> <img src="images/icon-view.svg" alt="" class="eye"> </div> </div> then you apply this CSS style: .image-equil { position: relative; } .img-overlay { display: none; background: hsl(178, 100%, 50%, 0.5); border-radius: 10px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .img-overlay .eye { position: absolute; top: 40%; left: 40%; width: 50px; } .image-equil img { display: block; border-radius: 10px; object-fit: cover; width: 100%; } .image-equil:hover .img-overlay { display: block; cursor: pointer; } I hope this helps you and remember to apply the style according to how you have named your elements.

  Marked as helpful

  1

  ---

  

  Tony•50

  @Snorri967Posted about 2 years ago

  @jomoke814 Thanks man, I really should of thought of that to be honest as I read on stackoverflow earlier that day about setting the position of the either the overlay relative the image, but thanks I will use this in future!

  0