Cómo hacer transición CSS Mostrar + Opacidad Propiedades

En CSS, la transición se refiere a un método para controlar la velocidad del elemento agregado al aplicar las propiedades de CSS. Más específicamente, puede realizar varias transiciones, incluidas las transiciones de páginas, las transiciones de imágenes, el texto y muchas más. Puede especificar los cambios que se aplicarán después de un período de tiempo específico, en lugar de que los cambios de propiedad entren en vigencia de inmediato.

Esta publicación explica el método para establecer la transición con la ayuda de CSS "mostrar" y "opacidad" Propiedades.

Cómo hacer transición CSS "Mostrar" y "Opacidad" de propiedades?

A la transición CSS "mostrar" y "opacidad"Las propiedades, primero, hacen un contenedor Div con el"" elemento. Luego, acceda al contenedor Div y agregue una imagen de fondo con la ayuda del "imagen de fondo" propiedad. Después de eso, configure el "transición","opacidad”, Y otras propiedades requeridas según su elección.

Paso 1: crear un contenedor "div"

Inicialmente, haga un contenedor Div con la ayuda del ""Contenedor y agregar un atributo de clase con un nombre en particular. Para hacerlo, hemos establecido el nombre de la clase como "artículo":

Paso 2: Establecer la propiedad "Mostrar"

A continuación, acceda al contenedor Div utilizando el nombre de la clase "ítem principal"Y establece el"mostrar" propiedad:

.ítem principal
bloqueo de pantalla;

Aquí, el valor del "mostrar"La propiedad se establece como"bloquear"Para tomar todo el ancho de la pantalla.

Paso 3: Agregar imagen de fondo

A continuación, aplique las siguientes propiedades CSS en el contenedor DIV accedido:

.ítem principal
Altura: 400px;
Ancho: 400px;
Image de fondo: URL (flores de primavera.jpg);
Opacidad: 0.1;
Transición: Opacidad 2S Fase-Out;
margen: 30px 50px;

En el fragmento de código indicado 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 del"url ()"Funciona en la parte trasera del elemento.
• "opacidad"Determina el nivel de opacidad para un elemento. El nivel de opacidad demuestra el nivel de transparencia, donde "1"Se usa sin transparencia, y"0.5" es para "50%"Transparencia.
• "transición"En CSS permite a los usuarios cambiar los valores de las propiedades sin problemas durante una duración dada.
• "margen"Define el espacio fuera del límite definido alrededor de un elemento.

Producción

Paso 4: Aplicar el pseudo selector ": Hover"

Ahora, acceda al contenedor Div a lo largo del ":flotar"Pseudo selector que se utiliza para seleccionar elementos cuando pasamos el mouse sobre ellos:

.PRINCIPALO: HOVER
Opacidad: 1;

Luego, configure el "opacidad"Del elemento seleccionado como"1"Para eliminar la transparencia.

Producción

Se trata de establecer las propiedades de "pantalla" y "opacidad" de transición CSS y "opacidad".

Conclusión

Para establecer la transición de las propiedades "Pantalla" y "Opacidad", primero, haga un contenedor DIV utilizando el elemento. A continuación, acceda al elemento div y establece "mostrar" como "bloquear". Después de eso, aplique las otras propiedades de CSS, que incluyen "imagen de fondo"Para insertar una imagen en el contenedor," transición "," opacidad "y otros. Esta publicación explicó el método para establecer la transición con CSS "mostrar" y "opacidad" propiedades.