TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear efectos de subtítulos de imagen CSS?

1

Cuando subes una imagen a un servidor, tiene propiedades como URL, título, título, texto alternativo y descripción. Sin embargo, solo puede ver la imagen y el título en el sitio web publicado. Generalmente, los webmasters se enfocan en mostrar la imagen y olvidan la importancia de los subtítulos. En este artículo, le mostraremos cómo crear efectos de subtítulos de imágenes CSS para mostrar los subtítulos de sus imágenes de una manera atractiva.

Aprenda WordPress: consulte más de 400 tutoriales gratuitos de WordPress.

Efecto de subtítulos de imagen CSS

Los widgets se verán a continuación.

Pie de imagen: estilo deslizante hacia abajo

Deslice el título hacia abajo. Enlace posible.

Pie de imagen – Estilo de división horizontal

Título de estilo dividido horizontal.

Pie de imagen – Estilo de división vertical

Título de estilo de división vertical

Pie de imagen: estilo deslizante

Subtítulo deslizante de la imagen

4 estilos diferentes

Como puede ver en la demostración, hay cuatro efectos diferentes con los que puede crear el título de la imagen.

  • Bajar deslizándose
  • División horizontal
  • División vertical
  • Deslizar hacia arriba

HTML para efectos de subtítulos de imágenes

Primero expliquemos la parte HTML con efecto de deslizamiento hacia abajo, para que sea fácil de entender la parte CSS. A continuación se muestra el HTML para el efecto de deslizamiento hacia abajo.

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

Tiene las siguientes clases de CSS:

  • común: este es el conjunto de estilos general aplicable a los cuatro efectos.
  • slidedown: este es el conjunto de estilos para crear un efecto de deslizamiento hacia abajo. Para otros tres efectos, hemos utilizado las clases CSS split-horiz, split-vert y slideup. Simplemente puede reemplazar esta clase para obtener un efecto diferente.
  • pic-caption: esta es la clase que define el efecto relacionado con el título de la imagen.

Nota: El tamaño de la imagen de 300 × 300 px se utiliza para que no se requieran ajustes adicionales en los dispositivos móviles.

CSS para efectos de subtítulos de imágenes

En el código HTML anterior, hemos utilizado el archivo "imagecaption.css" para importar todo el CSS requerido desde un archivo externo. A continuación se muestra el CSS para el efecto de deslizamiento hacia abajo y puede descargar los archivos CSS y HTML completos haciendo clic en el botón de abajo.

/* General Style */ .common{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } .common::before, .common::after{ content: ''; width: 100%; height: 100%; background: black; position: absolute; opacity: 0.3; top: 0; left 0; -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .pic-caption { position: absolute; text-align: center; background: lightyellow; z-index: 999; width: 100%; max-height: 100%; overflow: hidden; top: 50%; -webkit-transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0); -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 30px; font-size: 16px; } .pic-caption a{ text-decoration: none; } img { display: block; } /* Slidedown Caption */ .slidedown:hover::before{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slidedown:hover .pic-caption{ opacity: 1; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  • En la sección de estilo general, hemos creado bloques en línea para mostrar cada bloque de imagen.
  • Los pseudo elementos (:: antes y :: después) se utilizan para crear el efecto de control deslizante en la imagen.
  • Puede ver el título solo al pasar el mouse y es invisible cuando se carga la página.
  • La clase "pic-caption" asigna un color amarillo claro para el título y carga el título al 50% desde la parte superior de la posición de la imagen.
  • La transición y transformación CSS ayuda a deslizar el título de izquierda a derecha de la imagen.
  • La sección debajo de "Título deslizante hacia abajo" ayuda a mostrar el control deslizante y luego el título usando las propiedades de transición y transformación CSS.

Uso en su página web

Descargue el archivo zip “Image Caption Effects.zip" que contiene los códigos HTML y CSS completos para los cuatro estilos de efectos de subtítulos de imágenes.

El archivo zip tiene dos archivos “imagecaption.css” e “Imagecaption.html”.

  • Cargue el archivo CSS en la misma carpeta de su HTML o proporcione el enlace completo al archivo CSS en código HTML.
  • También puede insertar el CSS dentro de la sección de encabezado del HTML usando etiquetas….
  • Inserte el código HTML entre las etiquetas corporales de su página web.
  • Solo puede usar la sección div HTML relevante para el efecto en particular.

El HTML completo para los cuatro estilos debería verse a continuación:

<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More