Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Creating hover effects for your images

Hover effects display information or create movement when you move your cursor over an image. This adds a subtle level of interaction and animation to your site and can be a great way to reveal titles and captions without obscuring an image or taking up extra space on a page.

You can use hover effects on any template with Image Blocks and Slideshow Gallery Blocks. Certain templates support hover effects for Gallery Pages, Index Pages, and Products Pages. This guide explains each area in detail.

Hover effects in Image Blocks

You can show an image caption on hover in Inline Image Blocks

  1. Add a new Image Block or open an existing one.
  2. In the Design tab, ensure Inline is selected.
  3. Select Caption Overlay on Hover from the drop-down menu.
  4. Click Apply to close the window.
  5. Hover over the Image Block. In the black caption overlay that appears, click Write here... and enter your caption.
  6. Después de guardar la página, la leyenda aparecerá cuando se pase el cursor por encima de ella. Usa los retoques de Estilos del sitio para modificar el estilo de la leyenda de la imagen.

inline-hover.png

Hover effects in Gallery Blocks

You can show image titles and descriptions on hover in a Slideshow Gallery Block.

  • Hover effects are only available in the Slideshow Gallery Block design.
  • Titles and descriptions won't display on mobile devices narrower than 480 pixels.
  • Captions set to appear on hover may appear on larger devices, such as tablets, or for smaller devices in landscape mode. The captions will either always display, or appear on tap. This depends on the mobile device. 
  • To learn more about Gallery Blocks, visit Using Gallery Blocks.

Step 1 - Add a title and description

  1. Add a new Slideshow Gallery Block or open an existing one.
  2. In the Edit Gallery window, hover over an image and click the .
  3. Enter a title and description.
  4. Click Apply.

Step 2 - Select the hover effect

  1. Click the Design tab.
  2. Check Show Title and Description and Show on Hover.
  3. Select a position from the Title and Description Position drop-down menu.
  4. Click Apply.

Hover effects in Gallery Pages

Algunas plantillas admiten efectos cuando se pasa el cursor por encima de ellas para las Páginas de Galería. Puedes activar y ajustar estos efectos desde Estilos del sitio.

The following templates display captions and titles on hover for Slideshow and Grid designs only. Templates are grouped by family.

  • Adirondack
  • Aviator family - Aubrey, Aviator
  • Bedford family - Anya, Bryant, Bedford, Hayden
  • Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Farro family - Farro, Haute
  • Five
  • Galapagos
  • Native
  • Pacific family - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Skye family - Foundry, Indigo, Ready, Skye, Tudor
  • York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

To add titles and descriptions to a Gallery Page image, hover over the image and click the that appears.

Enable and customize the hover effect

Mientras estés en la Página de Galería, abre Estilos del sitio y desplázate hacia abajo hasta Estilos de la galería. Haz clic en Diseño de la galería: y selecciona Presentación Grilla .

  • Slideshow - Select Show on Hover from the Gallery Info Overlay drop-down menu. Titles and description will display on hover.
  • Grid - Titles and descriptions will appear on hover in lightbox, unless a clickthrough URL is set for the image. For more on lightbox, visit Setting images to open in lightbox.

Other Gallery Page effects by template

Gallery Pages in the following templates have special hover effects. Templates are grouped by family.

Plantilla Effects
Forte

Hovering over the Gallery Page's carousel displays navigation arrows. Hovering over a caption slides the caption up so you can read longer descriptions.

Momentum Arrow navigation on hover when fullscreen.

Familia Tremont

Camino, Carson, Henson, Tremont

Display captions on hover.
Wexley Hovering over images in a Gallery Page displays the image title and a color overlay.

Hover effects in Index Pages

Index Pages in the following templates have special hover effects. Templates are grouped by family.

Plantilla Effects
Avenue

Pasar el cursor por encima de una imagen en miniatura modifica su opacidad. Cambia el grado de opacidad con el retoque de Opacidad de la imagen en miniatura cuando se pasa el cursor en Estilos del sitio. Configura Posición del título del índice en miniatura Superpuesto para mostrar el título de la barra de navegación de la página cuando se pasa el cursor sobre ella.

Flatiron

Pasar el cursor sobre una imagen en miniatura amplía la imagen y te permite obtener una vista panorámica de esta. Activa o desactiva los efectos con los retoques de Proyectar la ampliación cuando se pasa el cursor y Proyectar visión panorámica cuando se pasa el cursor en Estilos del sitio.

Familia Montauk

Julia, Kent, Montauk, Om

Pasar el cursor sobre una imagen en miniatura modifica su opacidad. Cambia el grado de opacidad con el retoque de Opacidad de la imagen en miniatura cuando se pasa el cursor en Estilos del sitio.

Familia Tremont

Camino, Carson, Henson, Tremont

Hovering over a page title in the Index navigation causes the page's thumbnail to appear as a background image.

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Use the Image Hover Opacity tweak to make thumbnail images fade on hover. Use Title Display to set thumbnail titles to only display on hover.

 

 

Hover effects on Products Pages

Products Pages in the following templates have special hover effects. Templates are grouped by family.

Tip: For more information, visit Product hover effects.
  • Galapagos 

Supports unique alternate image and product info overlay options. Also supports a Quick View button.

  • Brine family - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Farro family - Farro, Haute
  • Skye family - Foundry, Indigo, Ready, Skye, Tudor
  • Tremont family - Camino, Carson, Henson, Tremont
  • York family - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
Display a secondary image, product details, or a fade effect. Also supports a Quick View button. 
  • Adirondack
  • Avenue
  • Aviator family - Aubrey, Aviator
  • Bedford family - Anya, Bryant, Bedford, Hayden
  • Five
  • Flatiron
  • Forte
  • Ishimoto
  • Momentum
  • Montauk family - Julia, Kent, Montauk, Om
  • Native
  • Pacific family - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Wells
  • Wexley
Display product names and prices over a color overlay on hover.
  • Supply

Supports unique product info overlay options.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 27 de 140