Responsive page with HTML, CSS and semi-active hover functions

Community feedback

• 

  Modesire Soneye•270

  @DesireyePosted over 1 year ago

  Hello Friends! I had issues with the actives states and could only overlay the view icon when hovering over the image, can anyone walk me through the colour overlay part?

  0

  ---

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @Desireye Your submission looks great.

  To answer your problem. Here is how you could do:

  1. Remove the overlay div. Instead use that div, which contains the eye image, as overlay and give that div classname of overlay.
  2. Make card-image position: relative; cuz we'll make that overlay div position absolute.
  3. Make overlay position absolute. {background: cyan; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 5px; display: grid; place-items: center; } with this. Here we cover the full size of card-image, and center the eye using css grid. Next make it opacity 0 and on hover opacity 1 and it should work. Tip: add some transition: all .4 ease; to make it animate smoother.

  Hope you find this feedback helpful!

  Marked as helpful

  1

  

  Modesire Soneye•270

  @DesireyePosted over 1 year ago

  @visualdenniss Thank you so much for your compliment and advice! I'll try it out as soon as I'm able!

  1

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @Desireye Happy to hear it helped. Meanwhile i've submitted my own solution for this exact challenge as well, so you might want to check it out to see a working example of what i was suggesting (basically instead of source code, just open the live site and check the html structure and applies css rules in developer tools of your browser, or right click and inspect) the one with "nftCard-view-icon-container" classname is the overlay div in my example.

  Good luck!

  Marked as helpful

  1