Cómo deslizarse hacia abajo para revelar el título y el subtítulo de la imagen en la galería con div Div

Si crea un sitio web donde las imágenes juegan un papel de diseño central, le recomendamos que incluya una galería en algún momento. Aquí viene el módulo de la Galería Div. Le permite seleccionar imágenes directas desde su biblioteca de medios y mostrarlas en una estructura organizada. Por defecto, puede mostrar dinámicamente el título y el subtítulo de cada imagen. Sin embargo, si desea limitar la cantidad de texto que aparece en su diseño, es posible que desee deslizarse hacia abajo para mostrar el título y el subtítulo de una imagen al moverlo. En este tutorial, le mostraremos exactamente cómo hacer esto. ¡Podrá descargar el archivo JSON de forma gratuita!
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. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
https://youtu.be/p6bh7wz3hmc suscribirse a nuestro canal de YouTube 1. Cargue imágenes con títulos y subtítulos de acceso a medios de acceso La primera parte de este tutorial se centra en agregar imágenes con títulos y subtítulos a su biblioteca de medios. Para llegar allí, explore su biblioteca WordPress> Media>.
Sube imágenes Una vez que llegues allí, cargue las imágenes que desea incluir en su galería.

Agregar títulos y subtítulos deberán agregar un título y una leyenda a cada imagen individualmente. Para obtener el resultado más óptimo, intente mantener una longitud de texto similar para cada imagen.

2. Cree el diseño con Divin Cree una nueva página o abra una existente Una vez que se hayan cargado sus imágenes, es hora de construir el diseño de la Divicidad. Cree una nueva página o abra una nueva y active Visual Builder en la parte superior.

Agregue la sección no. 1 Color de fondo Agregue una nueva sección a su página y abra la configuración de la sección. Aplique el siguiente color de fondo:

El color del fondo: #ededed
Agregue la estructura de la fila # 1 de la columna Continuar agregando una nueva línea utilizando la siguiente estructura de columnas: espaciado sin agregar módulos, abra la configuración, vaya a la pestaña de diseño y aplique los siguientes bordes hacia arriba y hacia abajo:

Margen superior: 5%

Margen inferior: 5%
Agregue un módulo de texto a la columna 1 Agregar el contenido de H2 es hora de agregar módulos, comenzando con un módulo de texto en la columna 1 que contiene un contenido H2.
Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: Montserrat

Rúbrica 2 Dimensión de texto:
Escritorio: 62 PX
Tableta: 48 PX
Teléfono: 32 PX
Título 2 Altura de la línea: 1.3em
Dimension Modify y el ancho del módulo máximo en diferentes tamaños de pantalla.
Ancho máximo:

Escritorio: 500 PX
Tableta: 400 PX
Teléfono: 250 PX
Agregue un módulo divisor en la visibilidad de la columna 1 El siguiente y último módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.
Divisor del espectáculo: si

La línea luego, cambie a la pestaña de diseño y cambie el color de la línea.
Color de línea: # FFC000

Dimensión Modifique la configuración de dimensionamiento del módulo.
Peso del divisor: 5 PX

Ancho máximo: 100 PX
Altura: 5 PX
Agregue un módulo de texto a la columna 2 Agregar contenido en la columna 2, el único módulo que necesitamos es un módulo de texto con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:

Texto de fuente: Lato

La altura de la línea de texto: 2.2em
El espacio aplica un margen más alto.
Margen superior: 50 PX

Agregue la sección 2 Agregue otra sección debajo de la anterior.
Fondo de gradiente Abra la configuración de la sección y aplique un fondo de gradiente. Caler 1: #ededed


Color 2: #ffffff

Tipo de gradiente: lineal
Posición inicial: 20%
Posición final: 20%
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Color de fondo sin agregar módulos, abra la configuración de línea y aplique un color de fondo.
Color de fondo: # F4F4F4

Dimension Switch a la configuración de tamaño de fila adicional y aplique los siguientes cambios:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2

Ancho: 90%
Ancho máximo: 1580 PX
Espacio personalizamos los valores de llenado.
Revestimiento superior: 150 PX
Finamiento inferior: 0 PX

ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Agregue el módulo de la galería a la columna Seleccione las imágenes cargadas es hora de agregar las imágenes, ¡usando un módulo de la galería! Seleccione las imágenes que cargó en su biblioteca de medios en la primera parte de este tutorial.
Elementos El efecto flotante solo tiene sentido en el escritorio. En un tamaño más pequeño de la pantalla, no hay movimiento, y el toque activará un efecto de caja de luz. Por esta razón, mostramos el título y el subtítulo solo en el escritorio y los deshabilitamos en dimensiones de pantalla más pequeñas. También deshabilitamos la paginación. Puede encontrar estas opciones en la configuración de elementos.
Muestra el título y el subtítulo

Escritorio: si

Tableta y teléfono: no
Mostrar paginación: no
Cambio de apariencia a la pestaña Diseño del módulo y cambie el aspecto aún más. Aspecto: Grid
Orientación en miniatura: retrato
Cubierta Cambiamos la configuración de superposición.

El color del icono superpuesto: #ffffff
Superposición de color de fondo: RGBA (0.0,0,0.25)
Configuración de texto Entonces, cambiaremos el color de texto en la configuración del texto.

Color de texto: Abierto
Configuración de texto de título Entonces, estilizaremos el texto del título.
Nivel de encabezado del título: H3

Título de la fuente: Montserrat
Título Tamaño del texto: 20 PX

Configuración de texto del subtítulo Cambie la configuración del texto del subtítulo.
Subtítulos de fuente: Lato
Subtítulo de texto en color: #efeffe
Espacio de letras subtítulos: 0.5 px

Altura de la línea de subtítulo: 1.9em
Artículo de la Galería CSS, entonces iremos a la pestaña Avanzada. Una vez que llegue allí, agregaremos las siguientes líneas de código CSS al cuadro CSS con el título del elemento de la galería: Padding-Top: 20px;
ROLED-LAFUT: 7%;
Right de relleno: 7%;
Galería de artículos de Subtitle CSS y usaremos estas líneas de código en el cuadro CSS con subtítulos del artículo de la galería: Padding-Top: 20px;

ROLED-LAFUT: 7%;
Right de relleno: 7%;
Bottom: 20px;

3. Aplique el efecto de revelación Agregar ID CSS al módulo de la galería Ahora que nuestro diseño está en nuestro lugar, podemos centrarnos en algunos pasos necesarios para crear el efecto revelador. Lo primero que haremos es agregar una ID de CSS a nuestro módulo de la galería.
ID CSS: Div-Gallery
Agregue un módulo de código en el módulo de la galería y luego, agregaremos un módulo de código en el módulo de la galería.
Agregue etiquetas de estilo para crear el efecto, usaremos un código CSS. Para preparar nuestro módulo de código para ese código, colocaremos algunas etiquetas de estilo en el cuadro de código.

Ingrese el código CSS entre las etiquetas de estilo y copiaremos las siguientes filas del código CSS entre etiquetas de estilo: #div-gallery .et_pb_gallery_item h3, #div-gallery .et_pb_gallery_item p {Visibility: Hidden;
Opacidad: 0;

Transformación: traducido (-50px);

Color de fondo: #Fe7541;

Margen-Bottom: 0px! IMPORTANTE;
margen-top: 0px! importante;
}
#Div-gallery .et_pb_gallery_item h3, #div-gallery .et_pb_gallery_item p, #div-gallery .et_pb_gallery_image {
-Webkit-transición: 300 ms todo cúbico-bezier (.4,0, .2,1);
-Moz-transición: 300 ms todo cúbico-bezier (.4,0, .2,1);
-O-transición: 300 ms todo cúbico-bezier (.4,0, .2,1);
-Ms-Transition: 300 ms todo cúbico-bezier (.4,0, .2,1);
Transición: 300 ms todo cúbico-bezier (.4.0, .2,1);
}
#Div-gallery .et_pb_gallery_item: hover h3, #div-gallery .et_pb_gallery_item: hover P {
Visibilidad: visible;
Opacidad: 1;
Transformar: traducido (0);
}
#Div-gallery .et_pb_gallery_item: hover div {
Transform: traduce (-10px);
}
¡Eso es todo! Guarde la configuración de la página y salga de Visual Builder para ver el resultado cuando coloca uno de los elementos de la galería. Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil