Html & Css

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted about 1 year ago

  Hello, @Ralpmike!

  To answer your question, You can make an overlay which will be an empty div and when the .box div is hovered we can change it opacity to 0.5.

  Here's how you can do it:

  • First make an empty div inside the .box div which contains the nft image and say give it a class of overlay like this:

  <div class="box relative>
       <img> 
      <div class="overlay"> </div>
      <img>
  </div>
  

  • Then after that we are going to make it absolute and make it cover the whole of it's parent div (which is .box) using the CSS like this:

  .overlay{
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      opacity: 0
      background-color: cyan; 
      transition: .3s ease-in-out;
  }
  

  • We set its opacity to 0 until the .box gets hovered over.
  • After adding the CSS we are going to target the .box div and use the :hover pseudo-class on it and then target .overlay and set its opacity to 0.5 like this:

  .box:hover .overlay {
    opacity: 0.5;
  }
  

  • In the code snippet above for the .overlay CSS I have added transition property too so that the hover is smooth!

  After doing all the above steps you will get a blue color on top of the image when hovered :D

  Good luck

  Marked as helpful

  1

  ---

  

  Ralpmike•200

  @RalpmikePosted about 1 year ago

  I'm eternally grateful for this. I know a mere thank you is not enough to appreciate what you’ve done for me. But I just want to say, thank you 🙏@adityaphasu

  1
• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  Nice well done. Regarding your issue, if you add these changes you'll be able to fix it.

  .box {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
  }
  
  .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 23, 12, 0.5); /* change this to the right color */
    opacity: 0;
  }
  
  .box:hover::before {
    opacity: 1;
  }
  
  

  Marked as helpful

  1

  ---

  

  Ralpmike•200

  @RalpmikePosted about 1 year ago

  Thank you for taking out time to help me out with this issue. 🙏 I'm grateful@hitmorecode

  0