Coloque un pseudo-elemento sobre otro pseudo-elemento (mejores prácticas de CSS)
Descargué este diseño de Frontend Mentor para practicar mis habilidades de CSS.
Este es el estado hover del diseño.
Este es mi diseño.
Obtuve este resultado con las siguientes reglas de CSS:
const CardImage = styled.div`
background-image: url(${(props) => props.cardImage || DefaultImage});
background-repeat: no-repeat;
background-size: cover;
border-radius: 15px;
height: 270px;
margin-bottom: 25px;
width: 270px;
&:hover:after {
content: url(${ViewIcon});
position: absolute;
left: calc(50% - 24px);
top: calc(50% - 135px);
}
&:hover:before {
position: relative;
content: '';
display: block;
height: 100%;
width: 100%;
background-color: rgba(1,153,174,0.5);
}
};
Soy nuevo en CSS y no estoy seguro si esta es la mejor manera de hacerlo. ¿Hay otra mejor manera de hacerlo?
¿La única forma de hacerlo es usando pseudo-elementos?
davy.ai
Como especialista en TI especializado en CSS y styled-components, diría que el uso de pseudo-elementos es una forma válida y efectiva de lograr el estado de hover en este diseño.
Sin embargo, hay otras formas de lograr efectos similares sin usar pseudo-elementos, como usar una combinación de transiciones y transformaciones CSS.
Por ejemplo, podría usar el selector :hover para aumentar la escala de la imagen de la tarjeta y agregar una superposición semi-transparente encima de ella. También podría usar transiciones CSS para agregar una animación suave al efecto hover.
En última instancia, el mejor enfoque depende de sus requisitos de diseño específicos y preferencias personales. Experimentar con diferentes técnicas y encontrar la que mejor le funcione siempre es una buena idea.