Plugins para cambiar imagen al pasar el mouse en WordPress

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
R

ramonjosegn

Quisiera saber si conocéis algún plugin que permita cambiar el efecto o la misma imagen en WordPress al pasar el mouse sobre ella.

Curiosamente no encuentro ninguno (al menos no gratuito).
 
¿Te sirvió? Únete a la conversación

Con tu cuenta gratis puedes responder, escribirle al autor por mensaje privado y comprar con Saldo retenido: el pago se libera cuando recibes lo acordado.

Toma 30 segundos · vuelves a este tema al terminar
Si es para lo que creo yo utlizaria estos estilos css para hacer el efecto..
HTML:
<style>
img {
    opacity: 0.8;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
 
Yo tb lo hago con css en mi blog (meeplesypeques) y se pueden conseguir efectos muy bonitos.

En concreto yo uso el paso de color a sepia y un zoom.
 
Gracias [MENTION=150941]MatosPerdomo[/MENTION] y ese código cómo lo aplicaría sobre una imagen concreta?

No sé porqué nadie ha hecho un plugin con alto tan simple...

- - - Actualizado - - -

¿me echas un cable con el código [MENTION=161042]shivanian[/MENTION] ?
 
Este es el código que tengo en mi css:

Insertar CODE, HTML o PHP:
.img-contenedor img {
-webkit-transition:all .9s ease; /* Safari y Chrome */
-moz-transition:all .9s ease; /* Firefox */
-o-transition:all .9s ease; /* IE 9 */
-ms-transition:all .9s ease; /* Opera */
}
.img-contenedor:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
.img-contenedor{overflow:hidden;}

.img-contenedor img {
filter: url('#sepia'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: sepia(0%);
-moz-filter: sepia(0%);
-ms-filter: sepia(0%);
-o-filter: sepia(0%);
filter: sepia(0%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.img-contenedor img:hover { 
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
filter: none;

-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Las imágenes a las que quiero aplicar el efecto las meto en un <div class="img-contenedor">

Con esto ya te debería funcionar el efecto. En Chrome va muy bien. En firefox no me cambia a sepia, estoy viendo el por qué.

Espero que te sirva!
 
Gracias [MENTION=161042]shivanian[/MENTION]

No quiero más problemas de carga, pero al menos el código me sirve como ejemplo para implementar alguno más sencillo. Muchas gracias por compartirlo.
 
Atrás
Arriba