Plugins para mudar imagem ao passar o mouse no WordPress

  • Autor Autor ramonjosegn
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
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).
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao 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:

Inserir CODE, HTML ou 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.
 
Voltar
Topo