10 efectos de imagen CSS realmente estimulante - CODEPEN

A día de hoy hay las imágenes en una web se han convertido en un elemento principal de llamada de atención al usuario que se acerca a ella para toda índole de temáticas. Desde fotografía, viajes, productos o escenas de cualquier tipo, las imágenes son uno de los elementos más importantes, así que si somos capaces de producir algún efecto llamativo, esa foto tendrá el poder de retener al usuario que ha caído en nuestra web.

Es simplemente lo que muchos de estos efectos son capaces de lograr en el visitante de un sitio web. Efectos CSS que son realmente llamativos en algunos casos .

Pasemos a listar 10 efectos de imagen CSS que llaman poderosamente la atención que la puedes encontrar en codepen.

1. Imagen hover

Se produce un efecto de desplazamiento en el mismo instante en el que posamos el puntero del ratón sobre la imagen.

2. Efecto hover en SVG

Un gran efecto hover que pone al descubierto la imagen que se encuentra escondida bajo el nombre mismo. De gran acabado y perfecto para mostrar una galería de imágenes creativa y curiosa.

3. Revelando parte de una imagen de fondo

Como si tuviéramos en nuestra mano el punto de mira de un teleobjetivo, se va revelando parte de la imagen de fondo según movemos el puntero del ratón.

4. Fluid Twisting Image 3D

Este efecto de imagen es realmente sorprendente al descomponer la imagen en un cubo 3D que es capaz de rotar sobre su verticalidad para producir un gran efecto visual. Basado en CSS3D, si eres capaz de implementarlo en tu sitio web, dejarás boquiabierto al visitante.

5. CSS 3D Panorama

HTML y CSS se dan la mano para realizar un gran efecto de panorama como si estuviéramos mirando desde lo alto de un edificio en una ciudad.

6. Persianas venecianas

Un gran efecto visual cada vez que dejes posado el puntero del ratón para que cambie entre los dos contrastes que da la imagen.

7. Imagen dividida

Al posar el puntero del ratón sobre la imagen, ésta se ampliará para dejarla perfectamente compuesta.

4. Efecto hover blur

Según vamos desplazando el puntero por la imagen se produce un efecto de desenfoque que se esfuma en cuestión de segundos.

4. Efecto lupa

Tal como su nombre indica, el puntero del ratón se convertirá sobre la imagen en una lupa que la amplifica.

4. Zoom de imagen

Este es el típico efecto de zoom que seguramente te querrás llevar ya a tu sitio web.




DEMO DE TODOS LOS EFECTOS.