40 + efecto de desplazamiento de imagen con CSS puro-imagehover. CSS

Vista prévia

Descripción

imagehover. CSS es una biblioteca CSS que proporciona 40 + animados efectos de animación de fantasía en las imágenes cuando se desplaza.

Funcionamiento

Para empezar, primero debe descargar e incluir el imagehover. CSS en la sección Head de la página HTML.

<link rel="stylesheet" href="css/imagehover.min.css">

Inserte imágenes con contenido flotante utilizando de figura y etiquetas de de figcaption.

<figure class="imghvr-fade">

<img src="1.jpg">

<figcaption>


<!-- Hover Content Here -->

</figcaption>
</figure>

Eso es todo. Cuando se desplaza sobre la imagen, se mostrará el contenido Hover con un efecto de fundido. Efectos Hover disponibles (clases CSS):

1. imghvr-fade
2. imghvr-push-up
3. imghvr-push-down
4. imghvr-push-left
5. imghvr-push-right
6. imghvr-slide-up
7. imghvr-slide-down
8. imghvr-slide-left
9. imghvr-slide-right
10. imghvr-reveal-up
11. imghvr-reveal-down
12. imghvr-reveal-left
13. imghvr-reveal-right
14. imghvr-hinge-up
15. imghvr-hinge-down
16. imghvr-hinge-left
17. imghvr-hinge-right
18. imghvr-flip-horiz
19. imghvr-flip-vert
20. imghvr-flip-diag-1
21. imghvr-flip-diag-2
22. imghvr-shutter-out-horiz
23. imghvr-shutter-out-vert
24. imghvr-shutter-out-diag-1
25. imghvr-shutter-out-diag-2
26. imghvr-shutter-in-horiz
27. imghvr-shutter-in-vert
28. imghvr-shutter-in-out-horiz
29. imghvr-shutter-in-out-vert
30. imghvr-shutter-in-out-diag-1
31. imghvr-shutter-in-out-diag-2
32. imghvr-fold-up
33. imghvr-fold-down
34. imghvr-fold-left
35. imghvr-fold-right
36. imghvr-zoom-in
37. imghvr-zoom-out
38. imghvr-zoom-out-up
39. imghvr-zoom-out-down
40. imghvr-zoom-out-left
41. imghvr-zoom-out-right
42. imghvr-zoom-out-flip-horiz
43. imghvr-zoom-out-flip-vert
44. imghvr-blur

Registro de cambios

12/02/2018

• actualizar

08/14/2018

• Bugfix