Design comparison
Solution retrospective
I spend a lot of time on image hover effect, couldn't get two elements to have different opacity, is there a better solution?
Community feedback
- @alisariyerPosted over 2 years ago
Hi Dominika,
About your question, I made a pull request on GitHub for your problem about hover.
I found a solution for your problem as removing a element, and put svg into overlay container. So not need #image positioning. I hope it will help.
Marked as helpful0 - @Priya366Posted over 2 years ago
Hi Dominika! Good work!
It will be great if you provide border-radius on hover effects of image same as the image border-radius.
Also, cursor: pointer would look better for hovering interactions.
I hope this will be helpful.
0 - @denieldenPosted over 2 years ago
Hi Dominika, good work!
You can fix the effect
:hover
creating adiv
that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solutionAlso add descriptive text in the
alt
attribute of the image and using<hr>
for the line is not the best way because this tag have a semantic meaning... in this case use div withborder-bottom
because this line is decorativeHope this help and happy coding!
0
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