@vanzasetia
Posted
Hi, Luis Fuentes! 👋
Regarding the icon-view.svg
, I would recommend showing it with pure CSS, pseudo-element and background
properties. You can actually create the entire overlay by only using CSS (not only the eye icon).
So, the way it works is to get the HTML right first so that it's accessible by screenreader users.
- First, we need to make the HTML right so wrap the image with an anchor tag (or
button
depending on what you would think will happen after the users click it). Then, addaria-label
to give some text content. - Second, make the
img
as a block element and then setmax-width: 100%
. Make sure you leave thealt=""
empty.
Now, for the styling.
- First, create a pseudo-element from the anchor tag (it could be
::after
or::before
). - Second, make the pseudo-element fill the entire image by using absolute positioning.
- Lastly, you can target the pseudo-element when the anchor tag is hovered, then show the background image and the background color. (
a:hover::after
) - Note: adjust the opacity of the background color by changing the alpha value. Not, by using the
opacity
property.
I notice that the attribution is disappearing for mobile users. I would recommend keeping it because mobile users would not have the same amount of information as desktop users. Also, not to mention that there are a lot of people are online through their mobile phones.
Hope this helps. 🙂
Marked as helpful