un blog
sobre 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:
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:
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í:
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:
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
xiboficemu.jimdofree.com Blog Feed
Vídeos responsive en Jimdo: Módulo dedicado vs Iframe (lun, 31 jul 2017)>> Leer más
Algunas ideas para tus efectos hover en imágenes (I) (Tue, 30 May 2017)
>> Leer más
Call to Action a ancho completo en Jimdo (Tue, 25 Apr 2017)
>> Leer más
un blog
sobre Jimdo®
Escribir comentario
Alberto (Tuesday, 13 June 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.
David delaØ (Tuesday, 13 June 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!
Jesús (Saturday, 16 September 2017 20:08)
Muchas gracias, como siempre fantásticos.
Solo una duda: si quiero hacerlo con varias imágenes ¿tengo que copiar tantas veces el código como imágenes quiera, o hay alguna manera de escribir las ID de las imágenes seguidas?
Gracias y un saludo
David delaØ (Friday, 22 September 2017 08:44)
Para no escribir tanto código puedes unificar los IDs de cada imagen de interés según cada línea CSS, separadas por comas (,). Por ejemplo, si una imagen precisa de una línea de estilo como la siguiente:
#ID-módulo-imagen-1 .clase .clase {atributos de estilo}
... Varias imágenes podrían aunarse así:
#ID-módulo-imagen-1 .clase .clase, #ID-módulo-imagen-2 clase .clase, #ID-módulo-imagen-3 .clase .clase {atributos de estilo}
... Y lo mismo para cada línea de código CSS
Así consigues comprimir algo el código, pues no repites continuamente los atributos de estilo.
Fernando (Thursday, 11 January 2018 19:53)
Hola, acabo de descubrir tu pagina, y llevo tiempo buscando como hacer el primer ejemplo. Lo quiero implementar en un slider que tengo de etiquetas (Freddie Mercury) y en las entradas aleatorias, que es lo que he añadido a la plantilla, y no lleva el mismo efecto que las otras. He probado con el id de los widgets pero no funciona, incluso he puesto el código css de lo que hay que poner en head directamente en la plantilla, pero no lo consigo. Se puede hacer lo que quiero o es otra cosa la que hay que poner. Un saludo.
Fernando (Thursday, 11 January 2018 19:56)
Me acabo de dar cuenta que es para Jimdo, y yo tengo un blog en Blogger, no se si sera igual, porque este código es parecido.
David delaØ (Friday, 12 January 2018 10:32)
Hola Fernando, el código, aunque es parecido porque los estilos CSS son iguales para todos los sitios webs (lo que cambia son las clases de los div), no sirve porque estos ejemplos están pensados para una imagen individual (aislada) en Jimdo... Seguro que se podría obtener una solución igual o similar para los casos que expones en Blogger, pero habría que estudiarlo más a fondo, y para ello mejor un experto en dicha plataforma. Siento no poder serte de más ayuda. Saludos y éxitos con tu blog.
Fernando (Friday, 12 January 2018 14:46)
Gracias por tu interés. Ya he preguntado en varios sitios, pero la mayoría de estas paginas ya no se actualizan. De todas maneras gracias.