Design comparison
Solution retrospective
i find it difficult creating the hover effect on the image
Community feedback
- @lr6kidyPosted over 2 years ago
Hi Moruf!
There might be a more effective way to do the hover effect, but this is how I did it:
I created a
<div>
the exact same size as the image, with abackground-color
of the bright cyan color listed in the style guide, and placed it over the image.I used
position: absolute;
to place the eye icon in the middle of said<div>
.I then set the
opacity
of both the div and the icon to 0, so that they don't normally appear.I changed the opacity to 0.5 for
div:hover
and to 1 foricon:hover
.I hope this helps in any way!
0 - @MohamedAridahPosted over 2 years ago
Hello @MorufLawal, congratulation on submitting your first solution🎉👏.
I have some notes for you:
- for the hover effect, put the image with
.eqn
class inside div with.image-wrapper
class for example and follow these styles:
.image-wrapper::after{ content: url(./images/icon-view.svg); position: absolute; background-color: rgb(0 255 247 / 45%); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }
.image-wrapper:hover::after { opacity : 1; }
i used div to wrap the image and do the hover effect since
<img>
alone doesn't work with::after
pseudo element.-
instead of using
<hr>
tag you can useborder-top
orborder-bottom
depending on the div you will use it. Also this is more Semantic -
for
.Bottom
give ittext-align: start
to be like the design also give space between the avater image and the text. -
use
<a>
element instead of span for author name. It's moreSemantic
and on click this name this may lead to another page. -
you can see My solution for this challenge it may be helpful for you..!
I hope this wasn't too long for you, hoping also it was useful😍.
Goodbye and have a nice day.
Keep coding🚀
0 - for the hover effect, put the image with
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