Pop-up en imágenes mediante CSS

7 Oct

Cool CSS Image Pop-up, otra técnica sencilla para lograr el efecto Pop-up en imágenes. Seguramente recordaran el post donde explicamos una. La idea es muy sencilla, dar el efecto Pop-up que habitualmente podemos llegar a ver mediante Javascript pero utilizando únicamente css. Utilizaremos una imagen miniatura y al pasar el Mouse sobre ella (mouse over), hará detonar el efecto Pop-up (imagen ampliada)
Podrán ver un demo aquí.

CSS:

 

  1. #pic {

  2. background-color: #FFFFFF;

  3. left: 10px;

  4. position: relative;

  5. top: 10px;

  6. width: 135px;

  7. }

  8. #pic a .large {

  9. border: 0px;

  10. display: block;

  11. height: 1px;

  12. left: -1px;

  13. position: absolute;

  14. top: -1px;

  15. width: 1px;

  16. }

  17. #pic a img {

  18. border: 0;

  19. }

  20. #pic a.p1, #pic a.p1:visited {

  21. background: #FFFFFF;

  22. border: 1px solid #000000;

  23. display: block;

  24. height: 90px;

  25. left: 0;

  26. text-decoration: none;

  27. top: 0;

  28. width: 135px;

  29. }

  30. #pic a.p1:hover {

  31. background-color: #8C97A3;

  32. color: #000000;

  33. text-decoration: none;

  34. }

  35. #pic a.p1:hover .large {

  36. border: 1px solid #000000;

  37. display: block;

  38. height: 233px;

  39. left: 150px;

  40. position: absolute;

  41. top: -60px;

  42. width: 300px;

  43. }

HTML:

 

  1. <p id=“pic”>

  2. <a class=“p1” href=“#” title=“miniatura”>

  3. <img src=“imagen/miniatura.jpg” title=“miniatura”>

  4. <img src=“imagen/grande.jpg” class=“large”></a>

  5. </p>

 

Via: Xyberneticos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: