10 efectos fáciles de mover la imagen que puedes copiar y pegar

Los efectos de desplazamiento son siempre un tema divertido para explorar. En el pasado, hemos creado algunos ejemplos asombrosos de elementos CSS que fueron fáciles de copiar y pegar directamente en su código.

Hoy, vamos a seguir con diez nuevos efectos específicamente diseñados para usar con imágenes. Cada ejemplo viene con un fragmento de código HTML y CSS que puede robar y una demostración en vivo para que pueda verlo en acción.

Vistazo

Antes de comenzar, eche un vistazo a la demostración a continuación para ver todos los diversos efectos de desplazamiento que estaremos creando.

Manifestación: Haga clic aquí para lanzar.

Preparar

Antes de comenzar a crear las demostraciones individuales, se requiere una configuración básica. Aquí hay una parte de CSS que usaremos para dictar la apariencia básica de todos los ejemplos.

* {-webkit-box-sizing: border-box; -mano caja de tamaño: cuadro de borde; -ms-box-sizing: border-box; tamaño de caja: caja de borde; } cuerpo {fondo: # 333; } .pic {border: 10px solid #fff; flotador izquierdo; altura: 300px; ancho: 300px; margen: 20px; desbordamiento: oculto; -webkit-box-shadow: 5px 5px 5px # 111; cuadro de sombra: 5px 5px 5px # 111; }

La mayor parte de esto es básico: el tamaño de la caja nos permite manipular el modelo de caja (siéntase libre de aplicar más específicamente si no le gusta el selector universal), y la clase pic nos da un lugar para agregar un estilo genérico para cada foto

Zoom y Pan

Nuestro primer grupo de efectos consiste en utilizar algunos trucos con desbordamiento oculto. Al recortar la imagen a los límites de un div, podemos lograr algunos hovers bastante interesantes.

Aquí hay una demostración de los cuatro efectos flotantes en acción:
Manifestación: Haga clic aquí para lanzar.

Crecer

Para comenzar, lo haremos para que cuando el usuario se desplace sobre la imagen, la foto se amplíe mientras se mantiene dentro de sus límites, lo que se traducirá en un efecto de zoom. Aquí está el HTML.

HTML

<img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_4.jpg"> <p>Hemos visto cómo hacer crecer una imagen al pasar el mouse, así que invirtamos ese efecto y alejemos la foto. El método es casi exactamente el mismo, solo que esta vez comenzarás con el tamaño a 400px y lo reducirás a 300px al pasar el cursor. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_5.jpg"> <p>El siguiente efecto mantiene la imagen del mismo tamaño en todo momento, pero la desplaza lateralmente a medida que el usuario se desplaza. Como puede ver en nuestro ejemplo de patadas, esta es una gran manera de transmitir un sentido de acción.</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_6.jpg"> <p>Una sartén vertical puede ser fría también. Una vez más, usaré este efecto para transmitir una sensación de movimiento, pero esto también es genial para comunicar la altura si quieres hacer una panorámica de algo como un edificio alto. El acantilado en nuestra foto ayuda a empujar este concepto. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_7.jpg"> <h3>Inclinación</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_8.jpg"> <p>Este es super simple, todo lo que vamos a hacer es rotar la imagen ligeramente cuando el usuario se coloque sobre ella. El resultado es una ilusión básica pero divertida de una imagen colgada torcida. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_9.jpg"> <p>Aquí es donde entra la locura. La imagen de arriba realmente no le hace justicia, así que asegúrese de revisar la demostración. Lo que pasa es que, cuando el usuario se desplaza, la imagen comienza a girar. A medida que gira, se transforma de un cuadrado en un círculo. El resultado es super divertido para jugar. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_10.jpg"> <p>Aquí hay otra extraña que usa el radio del borde para redondear la imagen. Esta vez, sin embargo, no solo aumentaremos el radio del borde, sino también su grosor. Combinado con el <em>casillero</em>, esto creará un efecto que se enfoca en una parte particular de una imagen. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_11.jpg"> <h3>Difuminar</h3> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_12.jpg"> <p>El primer efecto que buscamos es un simple desenfoque. Long ha buscado al hombre para desenfocar píxeles solo con CSS y ahora, finalmente, ¡es posible con una pequeña línea de código!</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_13.jpg"> <p>Esta vez vamos a eliminar toda la saturación de la imagen al pasar el cursor. Solía ​​tomar dos imágenes para lograr este efecto, pero con los filtros Webkit, podemos reducirlo a uno. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_2/10-easy-image-hover-effects-you-can-copy-and-paste_14.jpg"> <p>Para nuestro truco final, vamos a oscurecer una foto por defecto, luego la iluminaremos a su estado normal al pasar el mouse. Esto crea una especie de efecto revelador. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/http://lorempixel.com/300/300/technics/2"> / * DARKEN * / .brighten img {-webkit-filter: brillo (-65%); -webkit-transición: toda la facilidad 1s; -moz-transición: toda la facilidad 1s; -o-transición: toda la facilidad 1s; -ms-transición: toda la facilidad 1s; transición: toda la facilidad 1s; } .brighten img: hover {-webkit-filter: brillo (0%); }

Aquí, el 0% es brillo regular. Cualquier cosa que esté por encima de eso y tú iluminas la imagen, cualquier cosa debajo y la oscuras. Comenzamos en -65% y lo elevamos a 0% en el hover.

¡Robalos!

Los ejemplos anteriores están diseñados para que los robes y utilices como lo harás en tu propio trabajo, así que asegúrate de marcar esta página y volver a ella la próxima vez que estés buscando un interesante efecto de desplazamiento de CSS.