Skip to content
OverviewSolutions
3
Comments
2
Jordan
@Ciph-r

All comments

  • Roy•195
    @royschrauwenSubmitted almost 3 years ago

    Hello everyone! 👋

    I got to upload another solution! Making the hover effect was a little challenging. And I still am not completely satisfied because I could not het the image of the eye as white as in the design. If anyone can tell me what I can do to improve it, that would be very nice.

    Also, I could not get the line the same in Chrome as I got it in Firefox. Any pointers?

    This was also my 6th day in the #100DaysOfCode Challenge!

    If you have any advice, please let me know.

    Have a nice day! 🙋‍♂️

    Card with an image with hover in HTML & CSS

    2
    Jordan•70
    @Ciph-rPosted almost 3 years ago

    Hello,

    Your card looks really good. I ran into the same issue with the view icon not being fully white. From what I've read the issue seems to be related to how opacity effects child elements. There might be a better fix but for mine I ended up setting the background to the cyan color with alpha instead of using opacity. So just "background: hsla(178, 100%, 50%, 0.5);" and then the icon shows up clearly.

    Hope that helps!

    Marked as helpful
    1
  • Back•20
    @Back-xySubmitted almost 3 years ago

    I need feedback on the image hover part what is the best way to do it ? why ?

    and I need feedback on the image view icon, why is it effected by the background color? How can i fix it so it remains with it's original shade.

    NFT Preview Solution

    2
    Jordan•70
    @Ciph-rPosted almost 3 years ago

    I ran into issues with the view icon as well. From what I read it seems that opacity affects all the child elements. To get around the issue I ended up using a div with the background set to the Cyan color and some alpha, so hsla instead of hsl. That left the view icon at 100% opacity.

    Marked as helpful
    1