Amon• 2,560
@A-amon
Posted
Hello! Great job for this. It looks very responsive too~ 😀
1
P
Sara Dunlop• 220
@Risclover
Posted
@A-amon Hi! Thank you very much for the feedback.
I've never really used before/after pseudo-elements. I know what they are, but for some reason, I've never really learned how to use them. If you have the time, would you mind explaining to me how using that strategy works for the icon hover?
1
Amon• 2,560
@A-amon
Posted
@Risclover Hello, here is the code for the eye icon using pseudo-element 😀:
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Show eye icon when .heroimg is hovered on
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.heroimg:hover::after {
content: "";
height: 3rem;
width: 3rem;
display: block;
background-image: url("images/icon-view.svg");
background-size: contain;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I usually use pseudo-elements for small decorative images like icons or for overlays 💭. Refer here to know about how screen readers treat them
1
