Cómo revelar el contenido de la columna en Hover con div (¡descarga gratuita!)

En una de las últimas publicaciones de la Divic, te mostré cómo hacer que el contenido de la fila oculta aparezca en el flotador. Hoy, le mostraremos cómo usar el mismo tipo de enfoque para revelar el contenido de la columna. El enfoque al que nos abordaremos es similar y le permitirá crear todo tipo de modelos que tengan un hermoso efecto de desplazamiento en el escritorio, pero funciona bien para tamaños de pantalla más pequeños, sin opciones de desplazamiento. ¡Esperamos que este tutorial lo inspire a crear todo tipo de modelos interactivos para los sitios que construye! Al final de la publicación, podrá descargar el archivo JSON y adaptarlo a sus necesidades.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Desktop Como puede ver en el GIF a continuación, tenemos una transición suave a la carrera que revela el contenido de la columna en la carrera.

Móvil, por otro lado, en el tamaño más pequeño de la pantalla, el contenido de la columna ya se mostrará, sin la necesidad de moverse.

¡Comencemos a recrear! Suscríbase a nuestro canal de YouTube Agregue una nueva sección regular de espacio, abra una página nueva o existente y agregue una sección regular. Abra la configuración de la sección y agregue algunos revestimientos forrados e inferiores personalizados a la configuración de espaciado.
Revestimiento superior: 10 VW
Revestimiento inferior: 15 VW

Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y realice algunos cambios en la configuración del tamaño. Estas configuraciones permitirán que la fila ocupe todo el ancho de la pantalla y también ayudará a eliminar todo el espacio entre las columnas. Haga que esta fila completa el ancho: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio acceder a la configuración de espaciado de la fila a continuación. Aquí, reemplazaremos el espacio que eliminamos en el paso anterior al agregar valores de llenado personalizados.

Junta izquierda: 8VW
Junta derecha: 8VW
Columna 1 Junta derecha: 2VW
Columna 2 Lineo izquierdo: 1 VW
Columna 2 Lineo derecho: 1 VW
Columna 3 Junta izquierda: 2VW
Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido es hora de comenzar a agregar módulos. Comience con un módulo de texto en la columna 1. Agregue un contenido H3 de su elección.

Configuración de texto H3 Luego acceda a la configuración del texto del encabezado y realice algunos cambios en el contenido del contenido H3.

3 Fuentes de fuentes: Didact Gothic
Título 3 Fuente de peso: Bold
Título 3 Alineación de texto: Centro
Frup 3 color de texto: # 3567ff
Texto 3 Sección: 1.2VW (escritorio), 20 PX (tableta y teléfono)
Espaciado Agregue algunos valores de espaciado personalizados en el siguiente módulo de texto.

Margen inferior: 4VW
Revestimiento superior: 4VW
Revestimiento inferior: 4VW
Sombra de caja y dale al módulo un tono de caja sutil.

Box Shadow Posición vertical: 36px
Poder de poco claro de la sombra de la caja: 60 px
Shadow Color: RGBA (0.0,0,0.06)
Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido Continúe agregando otro módulo de texto justo debajo del anterior. Agregue un contenido de párrafo de su elección. Texto. Luego, acceda a la pestaña Diseño y realice algunos cambios en la configuración de texto.

Texto de fuente: Abrir sans

Tamaño de texto: 0.8VW (escritorio), 14 px (tableta y teléfono)
Texto de la carta de espacio: -0.05VW
La altura de la línea de texto: 2.2em
Orientación de texto: justificado
Color de texto: oscuro
Jugar espaciado con margen personalizado y valores de llenado y configuraciones de espaciado.
Margen inferior: 3VW


Revestimiento superior: 2VW
Revestimiento inferior: 2VW
Junta izquierda: 4VW
Junta derecha: 4VW
Borde y agregue un borde izquierdo y recto al camino utilizando la siguiente configuración:
El ancho del borde recto: 1 PX

Color del borde derecho: # E5E5E5
Agregue el módulo de botón a la columna 1 Agregue una copia de la siguiente manera que necesitamos en la primera columna es un módulo de botón. Agregue una copia de su elección.
Alinee luego, acceda a la pestaña de diseño y cambie la alineación del botón en el centro.

Alineación de botones: centro

Continúe el botón Continúe abriendo la configuración del botón y modifique la apariencia del botón para que coincida con el diseño general que queremos hacer.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1VW (escritorio), 15 px (tableta y teléfono)
El color del texto del botón: # 000000
El ancho del nudo del botón: 1 PX
El color del marco del botón: #dddddd
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: -0.05VW
Peso de fuente: en negrita
Estilo de fuente: mayúscula
Sparting Play con los valores de espaciado del módulo de botón.
Margen inferior: 100 px (tableta y teléfono) revestimiento superior: 0.8 VW (escritorio), 10 px (tableta y teléfono)


Bajo forro: 0.8VW (escritorio), 10 px (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 3.5VW (escritorio), 50 px (tableta y teléfono)
Revestimiento derecho: 3.5VW (escritorio), 50 px (tableta y teléfono)
Módulos de clon en la columna 1 dos veces y coloque los duplicados en las columnas restantes después de que termine de agregar los tres módulos diferentes en la columna 1, puede continuar y clonar cada uno de los módulos dos veces. Coloque los duplicados en las dos columnas que quedan para obtener el mismo diseño en cada una de las columnas.
Cambie el color del módulo de texto Texto no. 1 de la columna 2 Abra el primer módulo de texto en la columna 2 y cambie el color del texto.
Rúbrica 3 Color de texto: # 6D28C1

Cambie el color del módulo de texto Texto no. 1 de la columna 3 Haga lo mismo para el primer módulo de texto en la tercera columna.


Rúbrica 3 Color de texto: # 15668E
Agregue el módulo de texto superpuesto en la columna 1 agrega contenido ahora, que tenemos todo el contenido de la columna que necesitamos, podemos agregar el elemento superpuesto, que ocultará el contenido antes de colocarse. Para lograr esto, usaremos otro módulo de texto. Continúe y agregue uno más a la primera columna. Asegúrese de que este sea el último módulo en la columna. Agregue un contenido a su elección.

Fondo de gradiente Continúe agregando un fondo de gradiente al modo.
Color 1: # 6a30ff

Color 2: # 3567ff

Dirección de gradiente: 124 grados
Configuración de texto luego cambie la configuración de texto.
Fuente de texto: Didact Gothic
Color de texto: #ffffff

Tamaño del texto: 2VW
Orientación de texto: centro
Espacio y cree una forma desde el modo agregando valores de llenado personalizados. También agregamos un margen superior negativo para crear superposición entre este módulo y el contenido de la columna. No se puede hacer clic en el contenido que esconde detrás del módulo de texto. Por lo tanto, es importante mantener la necesidad de la acción, como
Revestimiento superior: 15 VW
Revestimiento inferior: 15 VW

Border agregue algunas esquinas redondeadas al siguiente módulo de texto.
Sombra de caja con un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 40 px
Color de la sombra: RGBA (0.0,0,0,16)

Filtros predeterminados luego, acceda a la configuración del filtro y asegúrese de que la opacidad sea “100%” de forma predeterminada.

Opacidad: 100%
Pase con el mouse sobre los filtros, cambie la opacidad al cursor a “0%”. Esto hará que el módulo desaparezca y permitirá que aparezca todo el contenido de la columna.
Opacidad: 0%

CSS personalizado Para garantizar que el módulo de texto permanezca por encima de todo el contenido de la columna, agregue dos líneas de código CSS a la pestaña avanzada del módulo de texto. Índice Z: 99;
Posición: pariente

Visibilidad y oculte todo el módulo en la tableta y el teléfono. Como se mencionó al comienzo de esta publicación, mostramos todo el contenido de la columna en dimensiones de pantalla más pequeñas para garantizar que la experiencia del usuario que tenga sea buena.
Clone el módulo de texto de superposición dos veces y coloque los duplicados en las columnas restantes después de que haya terminado de cambiar el texto superpuesto, continúe y clone dos veces. Coloque cada uno de los duplicados en las dos columnas restantes.

Cambie el fondo de gradiente del módulo de texto superpuesto en la columna 2 Cambie el color de fondo de gradiente del primer duplicado.
Color 2: # 6d28c1

Cambie el fondo de gradiente del módulo de texto superpuesto en la columna 3 y haga lo mismo para el segundo duplicado.

Color 1: # 41FF30

Color 2: # 15668e
Descargue la sección gratuita para poner sus manos en la sección de divulgación de columna, primero la descargará usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Vista previa de escritorio

Móvil