4 Efectos mouse over con CSS / CSS3 para imágenes

Hola, os dejo algunos efectos mouse over para imágenes creados con CSS que los podéis aprovechar tanto para resaltar las imágenes como para resaltar enlaces con una imagen.

Son muy sencillos de configurar y de insertar en la web, os también dejo el código.

Configura los parámetros a tu gusto y ya lo tienes.

  • Efecto up en la imagen creado con CSS:

Efecto up en imagen con mouse over creado con CSS
Efecto up de la imegen con mouse over

Al pasar el ratón sobre la imagen, esta sube ligeramente conforme al resto.

Demo: ver ejemplo

Código:

HTML

CSS

  • Efecto zoom en la imagen:

Efecto Zoom creado con CSS
Efecto Zoom

Al pasar el puntero sobre la imagen, esta se agranda a la vez que desplaza al resto a los lados.

Demo: ver ejemplo

Código:

HTML

CSS

  • Efecto giro

Efecto giro creado con CSS
Efecto giro creado con CSS

Este es un efecto de un giro parcial en el que se inclina ligeramente la imagen a la izquierda al pasar el puntero sobre ella.

Demo: ver ejemplo

Código:

HTML

CSS

  • Efecto texto deslizante junto a la imagen

Texto deslizante mouse over con CSS
Texto deslizante mouse over

En esta caso que al poner el mouse sobre la imagen, el efecto no es sobre esta, sino que sale un texto descriptivo a la derecha de la imagen y se desliza desde la parte superior. Aquí podemos poner tanto un titulo como un texto descriptivo.

Demo: ver ejemplo

Código:

HTML

CSS

 

NOTA: las medidas de tiempo de las transiciones están en segundos 1s un segundo y 0.5s medio segundo, esto puedes codificarlo a tu antojo y según tus necesidades, también puedes añadir efectos de brillo o sombras en el mismo CSS que aparezcan o desaparezcan al poner el puntero sobre ellas.

ejem: en este caso aparcera la sombra al poner el ratón para el ex2

Espero y deseo que os gusten.

Fuente: http://designshack.net/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Uso de cookies

Este sitio web utiliza cookies, tanto propias como de terceros (Google Analytics), para recopilar información estadística sobre su navegación generada a partir de las pautas de esta. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

- SÁQUEME DE AQUÍ - CERRAR