Design comparison
Solution retrospective
Hi, I make it in pure html /css. If you have any advice, im interested to know it!
Thanks for your Time, McMuffin1022
Community feedback
- @Mohammedabbas7Posted over 2 years ago
Congratulations on completing the challenge.
This is just a little advice:
- you just need to add hover effect to the image, title and creation name.
If you don't know how to make it just tell me.
Happy coding:)
0@McMuffin1022Posted over 2 years ago@Mohammedabbas7 Oh god, I have completely miss it!
thanks my friend :)
0@Mohammedabbas7Posted over 2 years ago@McMuffin1022 If you need any help just ask me.
0@McMuffin1022Posted over 2 years ago@Mohammedabbas7 How do you have make it ? I'm looking for the opacity and thats kinda hard
0@Mohammedabbas7Posted over 2 years ago@McMuffin1022 I don't understand what is exactly your problem?
0@McMuffin1022Posted over 2 years ago@Mohammedabbas7 I'm talking about the part with the hover. When i put my mouse on the image, i want to show the eye and the color background in cyan. But, i'm trying to do it without success. Do you have any advice for that part ?
0@Mohammedabbas7Posted over 2 years ago@McMuffin1022
- you can use pseudo element ::before to create overlay layer like this
.card__image::before { content: ''; background-color: hsl(178, 100%, 50%); width: 100%; height: 100%; border-radius: var(--border-radius); position: absolute; inset: 0; opacity: 0; transition: opacity .3s; } .card__image:hover::before { opacity: .6; }
- you can use pseudo element ::after to add icon view like this
.card__image::after{ content: ''; background: url(./images/icon-view.svg) no-repeat center; width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; } .card__image:hover::after { opacity: 1; }
- you can aslo check my solution
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