Cómo acercar una imagen en el ratón flotante usando CSS
El CSS "transiciónLa propiedad se utiliza para agregar efectos en los diferentes elementos HTML, como cambiar el ancho, la altura, el tamaño y la posición de los elementos. Al usar esta propiedad, también puede acercar una imagen en el mouse ratón con la combinación de propiedad de transformación y: elemento pseudo-clase de desplazamiento.
El propósito de este artículo es enseñarle el procedimiento de acercarse a una imagen en un ratón flotante. Entonces, comencemos!
Cómo acercar una imagen en el ratón flotante usando CSS?
El "transición" y "transformarLas propiedades de CSS se utilizan para hacer un zoom de una imagen en un ratón flotante. Antes de saltar a la implementación, discutiremos las propiedades mencionadas una por una!
Propiedad de "transición" CSS
El "transiciónLa propiedad se utiliza para cambiar el valor de las propiedades de CSS, como el ancho, la altura, la opacidad y la transformación dentro de un período de tiempo específico. Es una propiedad en taquigrafía de otras cuatro propiedades.
Consulte la sintaxis de la propiedad de transición.
Sintaxis
Transición: duración de transición de transiciónentrega de transición de transición de transición
La descripción de las propiedades mencionadas anteriormente se da a continuación:
- propiedad de transición: Se utiliza para establecer la transición a cualquier propiedad CSS, como ancho, altura, opacidad, transformación y muchos más.
- duración de la transición: Se utiliza para ajustar la duración de la transición.
- función de transición: Se usa para establecer la velocidad de la transición.
- retraso de transición: Especifica cuándo comienza o retrasa la transición.
CSS "Transformar" la propiedad
Para la transformación 2D y 3D de los elementos HTML, se usa la propiedad "transformar" de CSS. Al utilizar esta propiedad, puede modificar la forma y el tamaño de los elementos. También permite que un elemento gire, se sesgue y escala.
Sintaxis
La sintaxis del "transformar"La propiedad es:
Transformar: ninguno | transformación-funcionesLa descripción de la propiedad de transformación se proporciona a continuación:
- ninguno: Se usa para no establecer transformación de los elementos.
- transformar la función: Se utiliza para establecer la función de la propiedad de transformación, como Rotate (), SKEW (), Translate () y Scale (). Además, la función de escala () cambia de tamaño del elemento en direcciones horizontales y verticales.
Ejemplo 1: Zoom una imagen en el ratón flotante
Para acercar una imagen en un ratón flotante, agregue una imagen en el HTML, luego aplique el efecto de flotar.
Paso 1: Agregar imagen en Div
Para acercar una imagen en el mouse pasajero usando CSS, primero agregaremos una imagen en el "div". Para hacerlo, use la etiqueta y establezca la fuente de la imagen como "imagen.PNG " dentro de .
Html
Paso 2: Estilo Div
En CSS, usaremos "div"Para acceder al DIV que creamos en HTML y luego establece la altura del DIV como"250px"Y el color de fondo como"RGB (134, 240, 227)". Además, ajustaremos el borde alrededor del DIV colocando el ancho como "10px", estilo como "cresta" y color como "RGB (2, 141, 127)".
CSS
divAltura: 250px;
Antecedentes: RGB (134, 240, 227);
borde: 10px cresta RGB (2, 141, 127);
Paso 3: Establezca la posición de la imagen y aplique la propiedad de "transición"
En el siguiente paso, establezca la posición de la imagen utilizando el relleno como "80px" y "160px". Usaremos el ancho como "150px"Para ajustar el tamaño de la imagen. Después de eso, aplique la propiedad de transición a la imagen estableciendo el valor de la propiedad de transición como "transformar" y la duración de la transición como "0s":
imgrelleno: 80px 160px;
Ancho: 150px;
Transición: transformar 0s;
Nota: los valores del relleno se establecen como "80px"Representa el relleno de arriba e inferior, y"160px"Indica el relleno de izquierda y derecha.
Paso 4: Zoom una imagen utilizando la propiedad "Transformar" en Hover
Ahora, usaremos ".IMG: Hover"Para vincular la imagen con el elemento pseudo-clase flotante. Como resultado, se aplicará a la imagen a la imagen. A continuación, para acercar una imagen en el mouse, utilizaremos la propiedad de transformación y estableceremos el valor de la función de escala como "(1.9)"Para cambiar el tamaño de la imagen en direcciones horizontales y verticales:
img: hoverTransformar: escala (1.9);
Como puede ver, la imagen se acerca cuando el mouse se acerca:
Pasemos al siguiente ejemplo, en el que ampliaremos un gif en el ratón flotante.
Ejemplo 2: Zoom un gif en el ratón flotante
Primero, agregaremos un GIF en el HTML usando la etiqueta y especificaremos su fuente GIF como "Gif.gif":
Estearemos el Div lo mismo que el ejemplo anterior. Después de eso, establezca la posición del GIF usando el relleno como "50px" y "200px":
imgrelleno: 50px 200px;
Ancho: 150px;
Transición: transformar 0s;
A continuación, utilizaremos "IMG: Hover"Y establezca el valor de la función de escala como"1.6":
img: hoverTransformar: escala (1.6);
Al hacerlo, el GIF se acercará cuando el mouse lo supere:
Eso es todo! Hemos discutido el método de zoom de una imagen en mouse hover.
Conclusión
Para acercar una imagen en un ratón flotante "Transición" y "Transformar" Se utilizan propiedades de CSS. Primero, aplique la propiedad de transición en la imagen y establezca el valor como transformación. Luego en el ":flotar"Elemento de pseudo-clase, use la propiedad de transformación y establezca el valor de la función de escala (). En este manual, aprendimos el método para acercar una imagen en el ratón pasajero usando CSS y proporcionar ejemplos de él.