Caja con efecto hover usando el pseudoelemento CSS ::before y la propiedad transition

Vamos ha hacer un ejemplo práctico para entender mejor el pseudoelemento CSS ::before y la propiedad transition. Además el resultado es totalmente reutilizable para ser usado en portfolios, imágenes, cards, …

El pseudoelemento CSS ::before

Es el primer hijo del elemento seleccionado. Su uuso más común es el  añadir contenido estético a un elemento, a través de la propiedad content . Este elemento se muestra en línea con el texto de forma predeterminada.

 

La propiedad transition

La propiedad transition en CSS, permite definir la transición entre dos estados de un elemento. La propiedad transition en realidad es una propiedad abreviada de :

  • Transition-property
  • Transition- duration
  • Transition-delay
  • Transition-timing-function

 

El código

 

Análisis del código

En una descripción general, tenemos un elemento .box con una imagen y dentro otro elemento .info con un texto y unos links y luego tenemos  un pseudoelemento ::before del elemento .box

 

El elemento .info

Esste elemento es un contenedor flexible “display:flex” y su contenido esta centrado en los 2 ejes. El contenido no se visualiza al estar la propiedad “opacity:0”, para luego poner “opacity:1” en un :hover y aplicarle la propiedad transition para hacer lento el efecto

 

El pseudoelemento ::before

Usamos el pseudoelemento ::before en el elemento .box para crear un elemento con opacity:0 y content:””, color blanco y algo más pequeño que el padre, para luego en el :hover hacerlo igual de grande que el padre, ponerle “opacity:0” y aplicarle la propiedad transition para hacer lento el efecto

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *