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, …
Tabla de contenidos
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