Hacer que una imagen en hover no parpadee

contacta     ·     sobre     ·     azar     ·     buchaca     ·     manifiestos    ·   

  • Brote

    Las ideas totalmente trabajadas donde sus frutos rebosan a través de las palabras y las imágenes.

Esta es una movida que me trastorna cada vez que tengo que hacerlo. De hecho me sorprende que no esté de alguna forma solucionado de antemano y me recuerda a cuando empecé con HTML. Hacer que al pasar el ratón por una imagen se muestre otra es algo bien antiguo… ¡pues todavía parece que la gente quiere complicarse!

Sobre todo Elementor, que es lo que vengo usando hace tiempo porque me permite una flexibilidad enorme al no tener altos conocimientos de programación.

Al fin he logrado un pequeño hack que debí sacar de stackoverflow pero que no documenté en su momento. Ahora he vuelto a la página donde lo logré y me lo copio/pego aquí. La forma en que incluyo las imágenes es como fondo de la columna y coloco una imagen en transparencia en .png del tamaño que deseo se vea el fondo. Así también puedo poner un enlace al png porque si quiero que se pueda pinchar.

Si vais a https://river-eu.org veréis que hay unos países que al hacer mouse over no hace ese pequeño glithc al mostrar la imagen en amarillo.

Como lo he logrado es poniendo un código CSS sobre el título de cada país, de esa forma no me molesta tanto en ningún otro lado. Hay que decirle a la web que cargue la imagen del hover aunque esta no se vea y para ello hay que ponerla como fondo de algo y que no se vea en absoluto. Pero atención, no vale display:none 😉

background: url(https://river-eu.org/wp-content/uploads/2022/10/uk-amarillo.png) no-repeat -9999px -9999px;

Con ese código ya se verá todo genial. Se pone donde te muestro en la imagen:

Hagamos de esto una conversación

Deja un comentario

blogroll

Licencia de producción de pares excepto en lo que no sea de mi puño y bit.