efecto al poner el mouse encima de la imagen  

Hola Hilario,

Revisa el siguiente plugin para Wordpress por si te es de utilidad:

- https://wordpress.org/plugins/wp-flipper/

Saludos

gracias, lo voy a probar

Hola!

Otra opción alternativa disponer de 2 imagénes, ya sea de un artículo, producto, noticia o lo que fuese y que al pasar el ratón por encima y sacarlo se produzca una alternación de ambas imágenes.

Tendremos 2 imágenes dentro de un contenedor:

Los estilos necesarios serían:

.product-photo {
background-color: #CCCCCC;
float: left;
position:relative;
height: 285px;
margin-bottom: 5px;
width: 181px;
}

.img1 {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
}

.img2 {
position:absolute;
top:0px;
left:0px;
}

Y luego faltará la clave del asunto, el código jQuery que simula la alternación de las imágenes utilizando la función animate() con el atributo “opacity”.

$(document).ready(function() {
$('.desaparece').hover(function(){
$(this).animate({opacity:0});
},function(){
$(this).animate({opacity:1});
});
});

Buenos días,

Normalmente este efecto se puede hacer de una forma muy sencilla a través del css.
Básicamente lo que le estas diciendo es que tienes una imagen puesta, y cuando el ratón pase por encima de dicha imagen se cambie a otra.

Busca información sobre el, te pongo pequeño ejemplo
css:
#imagen {
background: url(ruta a la imagen/imagen1.jpg) no-repeat;
height: (alto)px;
width: (ancho)px;
}
Luego, tedrías que hacer otra etiqueta, en realidad la misma pero con el atributo :hover, que nos diga cual es la imagen que debe aparecer cuando el ratón esté encima (imagen2.jpg):

#imagen:hover {
background: url(ruta_a_la_imagen/imagen2.jpg) no-repeat;
height: (alto)px;
width: (ancho)px;
}

Espero sea de ayuda.

Reciba un cordial saludo.