hoverimages

Si han pensado en mostrar unas pocas líneas de texto sobre una imagen en sus sitios, pero no quieren renunciar al diseño actual, crear una imagen rica en información ha de ser una muy buena solución. Lo que vamos a tratar de lograr, es tener una imagen a tamaño completo donde esconderemos información adicional. Cuando el usuario se desplace sobre la imagen vamos a animar / modificar su tamaño para ocupar el resto del espacio con una imagen miniatura, titulo y descripción, además podrán volver al estado anterior con sólo mover el cursor fuera del panel de la imagen. La idea se basa en jQuery’s y sus funciones .hover() y .animate().

Ver DemoDescarga – Mas info Zoom-Info

  1. $(document).ready(function()
  2. {
  3.     $('.galleryImage').hover(
  4.         function()
  5.         {
  6.  
  7.         $(this).find('img').animate(
  8.                   { width:100,
  9.                     marginTop:10,
  10.                     marginLeft:10
  11.                   }, 500);
  12.  
  13.          },
  14.          function()
  15.          {
  16.  
  17.           $(this).find('img').animate(
  18.                    {width:325,
  19.                     marginTop:0,
  20.                     marginLeft:0
  21.                   },300);
  22.  
  23.          });
  24. });

Css

  1. .galleryContainer
  2. {
  3. width: 1024px;
  4. }
  5. .galleryImage {
  6.      background-color:black;
  7.      width:325px;
  8.      height:260px;
  9.      overflow:hidden;
  10.      margin:5px;
  11.      float:left;
  12. }
  13. .info{
  14. margin-left:10px;
  15. font-family:arial;
  16. padding:3px;
  17. }
  18. .info h2{
  19. color:gray;
  20. }
  21. .info p {
  22. color:white
  23. }
  24. .clear {
  25. clear:both;
  26. margin-top:10px;
  27. }