Design comparison
SolutionDesign
Solution retrospective
I'm left with most important part of lay-out. So i'm having trouble with adding opacity background-color on top of my image during hover and also i don't understand how those box-shadows works
Community feedback
- @amalkarimPosted almost 2 years ago
Hi Tumelo,
If you want to add color overlay on top of the image during hover, there are several approaches that you can use. Here is one example using pseudo element
::before
. Add this to your css file:.container_blocking::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 0.6875rem; background: transparent; transition: background 0.3s; } .container_blocking:hover::before { background: #00fff877; }
If you find this comment helpful, feel free to click
Mark as helpful
button. Happy coding!Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
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