Looking to hire developers?
Hello, this is my first challenge from this website to practice my HTML and CSS. Feedback and comments are also welcome. One question that I have about this preview card is about the hover state of the card image. I would like to have the view-icon to have higher opacity like how it was shown in the design. I've tried several methods, even looking through other solution, but I'm still confused on how they do it unless I copy paste the whole thing. I've tried using another div to contain the view-icon and use lower opacity for those container, while using opacity 1 for the view-icon but it still doesn't work for me. Increasing the z-index of the view-icon, in this case, also doesn't work. Either it really doesn't work this way or I'm coding it wrong. If anyone could please kindly explain it to me, I will be very thankful!
@NaveenGumaste
Posted
Hello airaciv ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
font-weight to the "Eth" 0.41.happy Coding😀
Marked as helpful
@airaciv
Posted
@Crazimonk you're right, i didn't notice this at all. I guess i need to train my eye more for these kind of details. Thanks!
@Samadeen
Posted
Hello! Cheers on Completing this challenge . You can use margin-top to push down your a little bit down.. Regardless you did very well . Happy Coding!!
@airaciv
Posted
@Samadeen Thanks for the feedback! I just thought it looks better this way in my browser, but I guess it doesn't look that way from the screenshot haha.
@imadbg01
Posted
hey @airaciv , I take look at your code, and for the issue that you have is because you need to add hover to both ('.view-icon', and ' , '.equilibrium-img') classes from the card-image class, I well submit a pull request to your repository if you want me to help you.
@airaciv
Posted
@imadbg01 hi, thankyou for the feedback! I've actually already fixed this by changing the opacity of the background-color instead while the opacity for the icon remain at 1
@airaciv
Posted
So after more browsing of the other solutions and do more research, I found that I can change the opacity of only the background-color of the view-icon by using RGBA value instead of HSL. I've fixed this part of my code. Other feedback and comment are always welcome!
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
