Cómo cambiar una imagen en Hover con Div

Saber cómo cambiar una imagen en Hover puede ser útil para cualquier tipo de sitio web para el que trabaje. Además, le ayuda a agregar interacciones sutiles a las páginas. Puede, por ejemplo, usarlo para proporcionar una perspectiva adicional a los testimonios, sobre las páginas y las páginas del equipo. Con las nuevas opciones de la división flotante, puede cambiar una imagen en Hover utilizando solo las opciones incorporadas. Al combinar los fondos de las columnas y el filtro de opacidad, llegará allí en el menor tiempo. ¡Vamos a eso! Vista previa Antes de arrojar nuestras cabezas en el tutorial, eche un vistazo a los cuatro ejemplos que recrearemos de cero

Pasos generales Agregue una nueva sección en la primera parte de este tutorial, pasaremos por algunos pasos generales. Estos pasos generales nos ayudarán a ahorrar tiempo cuando nos centremos en los primeros tres ejemplos. Abra una página nueva o existente y agregue una sección regular.

Agregue una nueva fila a la estructura de la columna y luego, agregue una nueva fila utilizando la siguiente estructura de columnas:

Imagen de fondo de la columna 1 sin agregar módulos, abra la configuración de la fila y agregue una imagen de fondo a la primera columna. Elija la imagen que desea aparecer con el mouse.
Columna 1 repetir la imagen de fondo: sin repetición

Agregue una imagen a la columna 1 Cargue la imagen Continuar agregando un módulo de imagen en la primera columna y cargando la imagen que desea mostrar antes de pasar con el mouse.

Agregue el módulo de texto de título a la columna 2 Agregar contenido a la segunda columna, primero necesitaremos un modo de texto. Continuar y agregar contenido H3.

Cabeza de texto de configuración luego, acceda a la configuración del texto del encabezado y realice algunos cambios. Rúbrica 3 Fuente: Baloo Tamma
El encabezado 3 Color de texto: # Eda96a
Título 3 Dimensión de texto: 100 PX (escritorio), 70 px (tableta), 50 px (teléfono)
Rúbrica 3 Espaciación de letras: -4px
Rúbrica 3 de texto de sombra longitud horizontal: 0.04em

Título 3 TEXTO Sombra Longitud vertical: 0.04em
Rúbrica 3 Color Shadow Text: RGBA (0.0,0,0,6)
Finalmente espaciado, agregue un margen superior a la configuración de espaciado.

Margen superior: 100 PX (escritorio), 50 px (tableta y teléfono)
Agregue el módulo divisor a la columna 2 muestra el divisor Agregar un módulo divisor justo debajo del modo de texto de título en la columna 2.

Divisor del espectáculo: si
Color divisor y luego cambie el color del separador.

Color divisor: # E25300
Estilos y seleccione otro estilo divisor en la configuración de los estilos.

Estilo divisor: puntaje
La dimensión aumenta el peso del separador y en la configuración del tamaño.

Peso del divisor: 3 PX
¡Agregue el módulo de texto del cuerpo a la columna 2 Agregue contenido al último módulo! Agregue un módulo de texto corporal a la segunda columna con un contenido particular de su elección.

Configuración de texto luego cambie la configuración de texto.

Tamaño de texto: 16 PX
La altura de la línea de texto: 2.3em
Orientación de texto: justificar
Clone la sección dos veces después de haber terminado todos los pasos generales, clone la sección que ha construido dos veces. Ahora, tendremos una sección separada para cada uno de los primeros tres ejemplos.

Crea el ejemplo no. 1 Aplique configuraciones adicionales al módulo de imagen de opacidad para comenzar a crear el primer ejemplo. Lo único que haremos aquí es la creación de la transición con el mouse, sin efectos adicionales. Para hacer esto, abra el módulo de imagen y acceda a la configuración del filtro. Asegúrese de que el valor predeterminado de la opacidad sea 100%. Opatía: 100%

Coloque el cursor sobre la opacidad, cambie la opacidad en la partida.
Opacidad: 0%

Las transiciones eventualmente crean una transición suave al aumentar la duración de la transición.
Duración de la transición: 1200 ms

Cree el ejemplo # 2 Aplique configuraciones adicionales al módulo de imagen de separación de definición, ¡vamos al segundo ejemplo! Abra el módulo de imagen en la columna 1 y asegúrese de que no haya un relleno personalizado predeterminado allí.
La distancia con el mouse continúa agregando fondos para que se despliegue para permitir que la imagen del flotador crezca en tamaño.


Finamiento inferior: 100 PX

Box Shadow también agregamos una sombra de cuadro predeterminado, que desaparecerá para una caminata.
Posición horizontal de la sombra de la caja: -55px

Box Shadow Posición vertical: -50px
Poder de extender la sombra de la caja: -10px
Shadow Color: # Eda96a
Opacidad predeterminada Luego, acceda a la configuración del filtro y asegúrese de que la opacidad predeterminada sea del 100%.
Opacidad: 100%

Coloque el cursor sobre la opacidad Retire la opacidad del módulo al cursor. Esto permitirá que aparezca el fondo de la columna y cree el efecto “Imagen de imagen”.
Opacidad: 0%

Las transiciones finalmente aumentan la duración de la transición en la configuración de transición del módulo de imagen.
Duración de la transición: 1200 ms

Crea el ejemplo no. 3 Agregue el fondo de gradiente en la columna 1 Para el tercer ejemplo, comenzamos a abrir la configuración y agregar un fondo de gradiente radial en la primera columna. Esto le dará a la imagen de una forma circular. Cales 1: RGBA (43,135.218.0)
Color 2: #ffffff

Columna 1 tipo de gradiente: radial
Columna 1 Dirección radial: Centro
Columna 1 Posición inicial: 60%
Columna 1 Posición final: 60%
Aplique configuraciones adicionales al módulo de imagen de opacidad predeterminado Continuar abriendo el módulo de imagen en la columna 1 y asegurándose de que la opacidad predeterminada sea 100%.
Opacidad: 100%
Coloque el cursor sobre la opacidad Retire toda la opacidad cuando pase con el mouse para permitir el fondo de la columna vertebral.

Opacidad: 0%
Crea el ejemplo # 4 Agregue una nueva fila La estructura de la columna, ¡vamos al último ejemplo! Aquí, necesitaremos una nueva fila con 6 columnas.

Imagen de fondo de la columna 1 sin agregar módulos, abra la configuración de la fila y agregue la imagen de fondo que desea mostrar con el mouse como imagen de fondo 1.
Columna 1 repetir la imagen de fondo: sin repetición

Repita para todas las columnas en la fila Repita el paso anterior para cada una de las columnas en su turno.

Dimensión Luego, acceda a la configuración de dimensionamiento de la fila y elimine todo el espacio entre las columnas.
Haga esta fila ancho completo: sí

Use el ancho de canal personalizado: 1

Agregue el módulo de imagen a la columna 1 Cargue la imagen Continuar agregando un módulo de imagen a la primera columna y cargando la imagen que desea mostrar de forma predeterminada.
Opacidad predeterminada Asegúrese de que la opacidad predeterminada de este módulo sea 100%.
Optacidad: 100%Coloque el cursor sobre la opacidad y elimine la opacidad en la carrera para permitir que se muestre el fondo.

Opacidad: 0%

Las transiciones aumentaron la duración de la transición para una transición suave.
Duración de transición: 800 ms

Clone el módulo de imagen 3 veces y coloque los duplicados en las columnas restantes después de haber terminado de cambiar el módulo de imagen en la columna 1, puede clonar y colocar los duplicados en las columnas restantes. Asegúrese de cambiar las imágenes también.
Vista previa ahora, que hemos pasado por todos los pasos y los cuatro ejemplos, para echar un vistazo final a los tres ejemplos que creamos.

Los pensamientos finales que cambian una imagen en Hover pueden contribuir a llevar esa interacción adicional a las secciones de testimonios, sobre páginas y páginas del equipo. ¡En este tutorial, le mostré una manera fácil de hacer diferentes tipos de imágenes en flotación utilizando solo las opciones incrustadas de DIV! Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación. Imagen presentada por Lovart / Shutterstock.com