Cómo cambiar la imagen en el flotador usando CSS

Hovering es una técnica que utiliza un dispositivo de puntería para interactuar con el elemento. Se puede usar para seleccionar o diseñar varios elementos CSS, como botones, imágenes, menús y muchos más. Aplicar flotante en un elemento cambiará su estado cuando un mouse desencadena el evento especificado.

El objetivo de este manual es explorar cómo cambiar una imagen en el flotador usando CSS. Vamos a empezar!

Qué es: flotar en CSS?

El: Hover es un elemento de pseudo-clase utilizado para cambiar el estado de los elementos HTML cuando un mouse lo desencadena. Este selector CSS se utiliza principalmente para estilo o seleccionar elementos. Sin embargo, no se puede aplicar a los enlaces.

Sintaxis

La sintaxis de: Hover se da a continuación:

Elemento: Hover
Código CSS ..

Aquí, "elemento"Se refiere al elemento en el que desea aplicar el efecto flotante.

Ahora, pasaremos al ejemplo práctico de cambiar la imagen en Hover usando CSS.

Ejemplo: cómo cambiar la imagen en el flotador usando CSS?

Para cambiar primero la imagen en Hover, agregue dos imágenes en la sección HTML. La primera imagen es para el estado activo, y la siguiente es para el estado flotante.

Paso 1: Agregar imágenes

Para el propósito especificado, agregaremos dos imágenes ","imagen1" y "imagen2", Y asigne el nombre de clase a la segunda imagen como"Hover_img".

Html

Paso 2: Imágenes de estilo

Ahora, muévase al CSS para establecer la posición de ambas imágenes usando "posición" propiedad. Estableceremos su posición como "absoluto"Posicionarlo absolutamente con referencia a su padre más cercano.

CSS

.img
Posición: Absoluto;

Esto mostrará el siguiente resultado:

En el siguiente paso, configuraremos la segunda imagen frente al primero. Para hacerlo, estableceremos la posición de la imagen como "absoluto"Y configure la posición superior e izquierda como"0". El uso de esta imagen se coloca frente a la primera imagen, pero queremos mostrar la segunda imagen cuando un mouse se desplaza en ella. Entonces, configurar el valor de visualización como "ninguno"Mostrará el resultado deseado:

.Hover_img
Posición: Absoluto;
arriba: 0;
Izquierda: 0;
Pantalla: ninguno;

La salida del código dado es el siguiente:

La segunda imagen se oculta con éxito detrás de la primera imagen.

Ahora, pasa al siguiente paso.

Paso 3: Cambiar la imagen en el flotador

A continuación, usa ":flotar"Y seleccionar".img"Para aplicar el flujo al elemento seleccionado. Luego, asigne el nombre de clase de la segunda imagen ".Hover_img". Después de eso, dentro de los paréntesis, establezca el valor de la propiedad de visualización como "en línea"Lo que obligará al elemento a encajar en la misma línea:

.IMG: Hover .Hover_img
Pantalla: en línea;

Aquí está el resultado que demuestra que la imagen se cambia cuando el usuario se cierne en ella:

La salida dada anterior indica que hemos cambiado con éxito la imagen en el flotador usando CSS.

Conclusión

La imagen se puede cambiar en el flotador usando el ":flotar"Elemento de pseudo-clase. Para hacerlo, agregue las imágenes requeridas en el archivo HTML, estén en la misma posición usando CSS y aplique el selector: Hover en ellas. Como resultado, la primera imagen cambiará cuando se desplaza sobre ella. En este artículo, hemos explicado cómo cambiar una imagen en Hover usando: Hover con un ejemplo práctico.