I spend a lot of time on image hover effect, couldn't get two elements to have different opacity, is there a better solution?
@alisariyer
Posted
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 helpful
@Priya366
Posted
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.
@denielden
Posted
Hi Dominika, good work!
You can fix the effect :hover creating a div 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 solution
Also 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 with border-bottom because this line is decorative
Hope this help and happy coding!
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
