un blog
sobre Jimdo®

Algunas ideas para tus efector hover en imágenes (I)

Algunas ideas para efectos hover en el módulo de imágenes de Jimdo

Jimdo ofrece la posibilidad de añadir un vínculo a una imagen convirtiendo esta en una vía para ayudar a los usuarios a navegar e interactuar con el sitio web. Dicho de otra manera, convierte la imagen en un botón. También existe la posibilidad de ejecutar una orden de zoom al hacer clic. El problema es que sin un efecto al pasar el ratón (efecto hover) puede que dicho vínculo o dicha ampliación sean acciones que pasen desapercibidas para el visitante, y es aquí donde el efecto hover puede ayudarnos. Veamos como incorporarlo en Jimdo.

Cuando un usuario posiciona el puntero del ratón sobre un área determinada, en el caso que nos ocupa: sobre una imagen que incluye un hipervínculo (enlace) o un zoom, un efecto de transición hace que el área cambie de color, muestre un texto o ejecute gestos más complejos como redimensiones, rotaciones o transformaciones en 3D. Eso es el efecto hover.

Para lograr este tipo de resultados debemos añadir algunas líneas de código en la zona correspondiente...

  • Head (ajustes > editar head) en el caso de plantillas predefinidas.
  • Zona CSS (diseño > plantilla propia > css) en el caso de plantillas personalizadas.

... ya que no dispones de la posibilidad de ejecutar efectos hover sobre imágenes de manera nativa.

Antes de seguir debo comentarte que la tendencia en el diseño web es que este tipo de efectos acaben cayendo en desuso. Por mucho que hasta ahora hayan aportado a la experiencia de usuario del diseño web, es posible que en el futuro, a medio plazo, dejen de usarse por obsoletos y poco eficaces de cara a las versiones móviles del sitio (en tu smartphone no hay puntero del ratón sino tu dedo, por lo que los efectos hover no son funcionales). De todas formas, se trata de una tendencia generalista que todavía no ha tornado en "regla general" (a la vista está que casi la totalidad de los sitios webs aún usan efectos hover) y que siempre serán útiles para resolver ciertos conceptos de diseño, y el que nos interesa aquí: el que sirvan de "aviso" para que el usuario interactúe, es uno de ellos. Aún así se hace obvio que existen algunos inconvenientes en el uso de estilos de hover. Tú decides si encajan o no en el concepto global de diseño de tu web con Jimdo:

Pros y contras del uso de efectos hover

PROS

  • Son un recurso divertido. La infinidad de posibilidades es una de las razones por las que son tan populares. Efectos tales como hacer fotos de zoom, mover o cambiar el tamaño...
  • Atraen el foco de atención sobre el usuario y "avisan" de que se trata de un objeto sobre el que interactuar.
  • En ocasiones proporcionan información adicional al usuario, incluso permiten mostrar diferentes posibilidades que el visitante puede evaluar antes de comprometerse con una acción específica.
  • Los usuarios están acostumbrados y entienden su funcionalidad.

CONTRAS

  • No funcionan en dispositivos móviles y/o de pantalla tactil.
  • Pueden ocultar otra información solo visible al hacer hover que podría pasar desapercibida.
  • Estos efectos, si se incorporan mal o son muy frecuentes en el sitio, pueden interferir con la experiencia de usuario y resultar frustrantes, incluso generando "túneles" que impiden la correcta navegación.

Utiliza esta información bajo tu propia responsabilidad. Los recursos a continuación pueden requerir de conocimientos de programación web html/css/js. Aunque procuro testear el código en sitios web propios creados con Jimdo a tal efecto, no me hago responsable de posibles bugs, fallos o incompatibilidades que pudieran surgir por su uso. Actualizaciones de Jimdo y/o de las dependencias de terceros podrían provocar mal funcionamientos en el widget/plugin en cuestión. El proceso es reversible eliminando el código añadido.

1- EFECTO HOVER TIPO ZOOM

Este efecto hover sugiere al usuario la posibilidad de hacer clic sobre la imagen con el objetivo de que esta se amplíe mediante un pop-up. Muy útil y usado en sitio dedicados a la fotografía, por ejemplo.

DEMO:

CÓDIGO:

En primer lugar, para añadir el icono universal para el zoom (la lupa) tienes disponible la galería de iconos de Font Awesome. Para ello inserta la siguiente referencia en el "head":



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />


Ahora el resto de estilos. Inserta en el "head" o en la sección CSS de una plantilla personalizada:



.cc-imagewrapper a {overflow: hidden; position: relative; background: #000; display: block; width: 100%; height: 100%;}
.cc-imagewrapper a img, .cc-imagewrapper a img:hover {-ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; cursor: pointer !important;}
.cc-imagewrapper a img:hover {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.3); transform: scale(1.3); -webkit-opacity: 0.8; opacity: 0.8;}
.cc-imagewrapper a:after {font-family: FontAwesome !important; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased;}
.cc-imagewrapper a:hover:after {content:'\f00e'; position:absolute; z-index:9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 40px;}
@media only screen and (max-width:1024px) {
.cc-imagewrapper a:after {content: '\f00e'; position: absolute; z-index: 9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 2rem;}
.cc-imagewrapper a img {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.3); transform: scale(1.3); -webkit-opacity: 0.8; opacity: 0.8;}
}


Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.

Nota: Las ordenes de estilos que te muestro a continuación, inicialmente van a actuar sobre todas las imágenes con la opción "imagen ampliable por clic" activada. Sí prefieres que los estilos se apliquen a una(s) imagen(es) concreta(s) puedes añadir el código ID único antes de cada línea de estilos CSS:


Cómo obtener la ID de módulo de Jimdo
Clic en botón derecho para "inspeccionar elemento" y obtener su ID correspondiente

Para que los estilos apliquen solo al módulo imagen del ejemplo anterior, simplemente debes añadir el atributo ID correspondiente antes de cada línea de código (# previo):



#cc-m-11189106772 .cc-imagewrapper a {overflow: hidden; position: relative; background: #000; display: block; width: 100%; height: 100%;}
#cc-m-11189106772 .cc-imagewrapper a img, .cc-imagewrapper a img:hover {-ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; cursor: pointer !important;}
#cc-m-11189106772 .cc-imagewrapper a img:hover {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.3); transform: scale(1.3); -webkit-opacity: 0.8; opacity: 0.8;}
#cc-m-11189106772 .cc-imagewrapper a:after {font-family: FontAwesome !important; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased;}
#cc-m-11189106772 .cc-imagewrapper a:hover:after {content:'\f00e'; position:absolute; z-index:9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 40px;}
@media only screen and (max-width:1024px) {
#cc-m-11189106772 .cc-imagewrapper a:after {content: '\f00e'; position: absolute; z-index: 9; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); color: #FFF; text-decoration: none !important; font-size: 40px;}
#cc-m-11189106772 .cc-imagewrapper a img {-ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.3); transform: scale(1.3); -webkit-opacity: 0.8; opacity: 0.8;}
}


Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.

2- EFECTO HOVER TEXTO SLIDE UP

Donde aparece un texto corto que puede ser meramente informativo o que puede indicar que se trata de un elemento sobre el que interactuar (hacer clic).

DEMO:

Clic en la imagen para más información (ejemplo)
Clic en la imagen para más información (ejemplo)

CÓDIGO:

Si no lo has hecho ya, añade la librería de iconos de Font Awesome. Para ello inserta la siguiente referencia en el "head":



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />


Ahora los estilos. Inserta en el "head" o en la sección CSS de una plantilla personalizada:



.cc-imagewrapper {overflow: hidden; position: relative; display: block; width: 100%; height: 100%;}
.cc-imagewrapper figcaption {position: absolute !important; top: auto; bottom: 0; padding: 20px; background: #111; color: #fff !important; width: 100% !important; font-weight: lighter !important; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; -webkit-opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; font-size: 12px !important; line-height: 100% !important; letter-spacing: 0.5px !important;}
.cc-imagewrapper figcaption::after, .cc-imagewrapper figcaption::before {content:'\f106'; font-family: FontAwesome !important; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; font-size: 120%; margin: 0 10px;}
.cc-imagewrapper:hover figcaption {opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s;}
.cc-imagewrapper img {-webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.cc-imagewrapper:hover img {-webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px);}
@media only screen and (max-width:1024px) {
.cc-imagewrapper figcaption {opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
.cc-imagewrapper img {-webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px);} 
}


Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.

El texto que aparece en el slide al posicionar el ratón sobre la imagen se añade/edita en la sección "subtítulo" (texto alternativo y subtítulo) del módulo imagen de Jimdo. En el caso del ejemplo quedaría así:

Subtítulo y texto alternativo en módulo imagen de Jimdo
Añadir texto que aparecerá en el slide en el campo "Subtítulo"

Al igual que en el caso anterior, se debe añadir a cada línea de código la ID de la imágen sobre la que se desea que se aplique este efecto; incluso en este caso se torna imprescindible, pues respecto al anterior efecto descrito, si no se añade el ID, se aplicaría solo en las imágenes configuradas con la opción "imagen ampliable por clic", pero en este caso, si no se añada el ID se aplicaría a todos los módulos imagen, sin excepción.

El código de estilos añadiendo el ID quedaría tal que así (sustituye la ID #cc-m-XXXXXXXXXXX del ejemplo por la correspondiente de tu módulo):



#cc-m-XXXXXXXXXXX .cc-imagewrapper {overflow: hidden; position: relative; display: block; width: 100%; height: 100%;}
#cc-m-XXXXXXXXXXX .cc-imagewrapper figcaption {position: absolute !important; top: auto; bottom: 0; padding: 20px; background: #111; color: #fff !important; width: 100% !important; font-weight: lighter !important; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; -webkit-opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; font-size: 12px !important; line-height: 100% !important; letter-spacing: 0.5px !important;}
#cc-m-XXXXXXXXXXX .cc-imagewrapper figcaption::after, #cc-m-9096537769 .cc-imagewrapper figcaption::before {content:'\f106'; font-family: FontAwesome !important; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; font-size: 120%; margin: 0 10px;}
#cc-m-XXXXXXXXXXX .cc-imagewrapper:hover figcaption {opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s;}
#cc-m-XXXXXXXXXXX .cc-imagewrapper img {-webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
#cc-m-XXXXXXXXXXX .cc-imagewrapper:hover img {-webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px);}
@media only screen and (max-width:1024px) {
#cc-m-XXXXXXXXXXX .cc-imagewrapper figcaption {opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
#cc-m-XXXXXXXXXXX .cc-imagewrapper img {-webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px);} 
}


Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.

3- EFECTO HOVER BOTÓN 'LEER MÁS'

En este caso, al hacer hover sobre la imagen se muestra un botón tipo "leer más" que obedece al vínculo que configures en el módulo imagen. Solamente, y aquí es donde está la gracia, el área del botón acciona el link. Igualmente es posible incorporar un texto/título configurable desde el campo "subtítulo". Una serie de transiciones y desplazamientos hacen el resto y entregan un resultado visualmente muy atractivo.

DEMO:

Este es un texto de ejemplo insertado en el campo subtítulo del módulo imagen
Este es un texto de ejemplo insertado en el campo subtítulo del módulo imagen

CÓDIGO:



#cc-m-XXXXXXXXXX .cc-imagewrapper {overflow: hidden; position: relative; display: block; width: 100%; height: 100%;}
#cc-m-XXXXXXXXXX .cc-imagewrapper figcaption  {text-transform: uppercase !important; font-size: 28px !important; font-weight: bold !important; position: absolute !important; top: 50% !important; left: 0 !important; right: 0 !important; margin: auto; width: 100% !important; max-width: 80% !important; color: #111 !important;line-height: 1.5 !important; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0);}
#cc-m-XXXXXXXXXX .cc-imagewrapper:hover figcaption {color: #fff !important; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0);}
#cc-m-XXXXXXXXXX .cc-imagewrapper::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 75%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
#cc-m-XXXXXXXXXX .cc-imagewrapper:hover::before {opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
#cc-m-XXXXXXXXXX .cc-imagewrapper a::after {content:'leer más'; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 180px; opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; font-size: 14px; padding: 1.2em; color: #FFF; text-transform: uppercase; border: 1px solid #FFF; cursor: pointer;}
#cc-m-XXXXXXXXXX .cc-imagewrapper:hover a::after {opacity: 1; -webkit-transform: translate3d(0,-250%,0); transform: translate3d(0,-250%,0);}
#cc-m-XXXXXXXXXX .cc-imagewrapper a:hover::after {background: #000; border-color:#000; color: #FFF !important; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;}
#cc-m-XXXXXXXXXX .cc-imagewrapper a {cursor: default !important;}
@media only screen and (max-width:1024px) {
#cc-m-XXXXXXXXXX .cc-imagewrapper figcaption {color: #fff !important; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0);}
#cc-m-XXXXXXXXXX .cc-imagewrapper::before {opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
#cc-m-XXXXXXXXXX .cc-imagewrapper a::after {opacity: 1; -webkit-transform: translate3d(0,-200%,0) !important; transform: translate3d(0,-200%,0) !important;}
}


Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.

Al igual que en el caso anterior, se debe añadir a cada línea de código la ID de la imágen sobre la que se desea aplicar este efecto. Sustituye el ejemplo #cc-m-XXXXXXXXXXX por la ID del módulo imagen sobre el que te interese actuar.

  • Modifica el título sobre la imagen añadiendo tu propio texto en el campo "subtítulo" del módulo imagen.
  • Enlaza el botón mediante la herramienta "introducir enlace" del mismo módulo imagen.
  • Si quieres cambiar el texto del botón debes modificarlo sobre el código: 6ª línea > content:'leer más'

Gracias a la posibilidad que ofrece Jimdo de editar el código CSS puedes tunear (hasta cierto punto) el 'módulo imagen' y hacerlo más dinámico. Las posibilidades son enormes. Los efectos descritos en este artículo son sólo una pequeña muestra de ello. Espero te sirvan de inspiración... Veremos más ideas y opciones en otros post.

Diseñador y desarrollador de proyectos web

Jimdo Expert

www.jimd-oh.com Blog Feed

Algunas ideas para tus efector hover en imágenes (I) (mar, 30 may 2017)
>> Leer más

Call to Action a ancho completo en Jimdo (mar, 25 abr 2017)
>> Leer más

Más estilo para los botones de Jimdo (I) (jue, 30 mar 2017)
>> Leer más

Escribir comentario

Comentarios: 2
  • #1

    Alberto (martes, 13 junio 2017 12:15)

    Como siempre, INCREÍBLE TODOS TUS TRUCOS... me encanta.
    este truco es genial y hace mucho tiempo que lo estaba buscando, pero tiene un problema en mi caso y es que la imágenes PNG sin fondo automáticamente se transforman con un fondo negro y la verdad es que no me gusta nada.
    ¿se podría corregir ese pequeño fallo?

    un saludo David... y mil gracias por tu ayuda incondicional.

  • #2

    David delaØ (martes, 13 junio 2017 16:06)

    @Alberto, supongo que te refieres según el primer ejemplo (hover tipo zoom), puesto que se le ha añadido un fondo negro que haga de contraste al hacer hover y que incluye una ligera transparencia de la imagen. Busca en la primera línea la propiedad "background: #000" y elimínala. Saludos!

un blog
sobre Jimdo®