HMTL & CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  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, add aria-label to give some text content.
  • Second, make the img as a block element and then set max-width: 100%. Make sure you leave the alt="" 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

  1
• 

  Esteban•150

  @ehmenzalaPosted over 2 years ago

  ¡Hola @EleganteOso!

  • Veo que, al realizar :hover sobre el <div></div> que contiene a tu imagen, le asignas a la imagen una opacidad (opacity) de 0.5.
  • Pienso que está bien implementada tu solución por esa parte.

  Para implementar el ícono te sugiero lo siguiente...

  Al <div></div> que contiene la imagen, puedes asignarle también la propiedad background-image: url();. Dentro de url() debes colocar, con comillas dobles o simples, la ruta hacia la imagen del ícono del ojo. No te olvides de asignar la propiedad background-repeat: no-repeat;. Y asegúrate de posicionar bien el ícono con la propiedad background-position.

  Tips extras...

  En el título de tu tarjeta, al poner el cursor a la derecha de este —sin tocar ninguno de sus caracteres—, se dispara el evento :hover sobre el título (Se aplica el color celeste al título). Para evitar esto te sugiero que en <h1 class="title">Equilibrium #3429</h1> asignes la propiedad width: max-content; para que el :hover solo se aplique cuando apuntas con el cursor sobre las letras del título, mas no a los lados.

  Te dejo un enlace hacia la documentación de la propiedad max-content por si quieres echarle un vistazo...

  ¡Suerte! 👋

  Marked as helpful

  0

  ---

  

  Luis Fuentes•50

  @EleganteOsoPosted over 2 years ago

  @ehmenzala Thanks, I'll put it into practice

  0