Plugins para cambiar imagen al pasar el mouse en WordPress

[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).

 

[epsilo99]

me interesa tambien!!!

 

[MatosPerdomo]

Amazing Hover

 

[ramonjosegn]

Amazing Hover

Gracias por el consejo pero ese plugin crea textos y más efectos, sólo quiero un simple "cambio de luz" o algo similar, algo sencillo...

 

[MatosPerdomo]

Si es para lo que creo yo utlizaria estos estilos css para hacer el efecto..

<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>

 

[shivanian]

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.

 

[ramonjosegn]

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] ?

 

[shivanian]

Este es el código que tengo en mi css:

.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!

 

[ramonjosegn]

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.