efecto al poner el mouse encima de la imagen  

 
Hilario
 Hilario
Usuario eminente

Hola, alguien del foro me podria decir como puedo hacer ese efecto de girar 180 grados una imagen cuando pongo el raton encima??
Os pongo el link del theme en concreto en el que he viso que se hace tal efecto.
En el apartado THE CREATIVE PROCESS
El link al theme es http://themeforest.net/item/infographer-multipurpose-infographic-theme/full_screen_preview/5027304

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 21/02/2015 7:58 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Hilario,

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

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

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 22/02/2015 1:55 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Hilario
 Hilario
Usuario eminente

gracias, lo voy a probar

ResponderCitar
Respondido : 22/02/2015 5:18 pm
Julen
 Julen
Miembro Admin

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});
});
});

This post was modified hace 1 mes por antonio

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 22/02/2015 5:25 pm

Cursos Gratuitos WordPress

Enrique
 Enrique
Usuario activo

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.

ResponderCitar
Respondido : 23/02/2015 11:07 am

Por favor Iniciar Sesión o Registro