Cómo hacer la transición de las propiedades de 'pantalla' + 'opacidad' de CSS

Paso 2: establecer la propiedad 'mostrar'

A continuación, acceda al contenedor div utilizando el nombre de clase ' elemento principal ” y establezca el “ mostrar ' propiedad:

Aquí, el valor de la “ mostrar La propiedad ” se establece como “ bloquear ” para ocupar todo el ancho de la pantalla.

Paso 3: Agregar imagen de fondo

A continuación, aplique las siguientes propiedades CSS en el contenedor div al que se accede:

En el fragmento de código mencionado anteriormente:

• “ altura ' y ' ancho Las propiedades determinan el tamaño del elemento definido.
• “ imagen de fondo La propiedad CSS se utiliza para insertar una imagen con la ayuda de ' URL() ” en la parte trasera del elemento.
• “ opacidad ” determina el nivel de opacidad de un elemento. El nivel de opacidad demuestra el nivel de transparencia, donde “ 1 ” se utiliza para no transparencia, y “ 0.5 ' es para ' 50% ” transparencia.
• “ transición ” en CSS permite a los usuarios cambiar los valores de propiedad sin problemas durante un período determinado.
• “ margen ” define el espacio fuera del límite definido alrededor de un elemento.

Producción

Paso 4: Aplique el pseudoselector “:hover”

Ahora, acceda al contenedor div a lo largo del ' :flotar ” pseudoselector que se utiliza para seleccionar elementos cuando pasamos el mouse sobre ellos:

Luego, configure el “ opacidad ” del elemento seleccionado como “ 1 ” para eliminar la transparencia.

Producción

Se trata de configurar las propiedades de 'pantalla' y 'opacidad' de CSS de transición.

Conclusión

Para configurar las propiedades de 'pantalla' y 'opacidad' de la transición, primero, cree un contenedor div usando el elemento