7

Pop-up en imágenes mediante CSS

Publicado por Nikko el dia 7 Oct 2007 - Guardado en 288 Views CSS 288 Views

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í.

PLAIN TEXT
CSS:
  1. #pic {
  2.     background-color: #FFFFFF;
  3.     left: 10px;
  4.     position: relative;
  5.     top: 10px;
  6.     width: 135px;
  7. }
  8.  
  9. #pic a .large {
  10.     border: 0px;
  11.     display: block;
  12.     height: 1px;
  13.     left: -1px;
  14.     position: absolute;
  15.     top: -1px;
  16.     width: 1px;
  17. }
  18.  
  19. #pic a img {
  20.     border: 0;
  21. }
  22.  
  23. #pic a.p1, #pic a.p1:visited {
  24.     background: #FFFFFF;
  25.     border: 1px solid #000000;
  26.     display: block;
  27.     height: 90px;
  28.     left: 0;
  29.     text-decoration: none;
  30.     top: 0;
  31.     width: 135px;
  32. }
  33.  
  34. #pic a.p1:hover {
  35.     background-color: #8C97A3;
  36.     color: #000000;
  37.     text-decoration: none;
  38. }
  39.  
  40. #pic a.p1:hover .large {
  41.     border: 1px solid #000000;
  42.     display: block;
  43.     height: 233px;
  44.     left: 150px;
  45.     position: absolute;
  46.     top: -60px;
  47.     width: 300px;
  48. }

PLAIN TEXT
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>

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!
comentarios
  1. Pop-up en imágenes mediante CSS - Gravatar

    Pop-up en imágenes mediante CSS

    7 - 10 - 2007

    Permalink

    [...] XYBERNETICOS, nos muestra técnica sencilla para lograr el efecto Pop-up en imágenes, mediante CSS. La idea es [...]

  2. Crear un pop-up con CSS | Freak Group | Diseño web, recursos y mucho más - Gravatar

    Crear un pop-up con CSS | Freak Group | Diseño web, recursos y mucho más

    7 - 10 - 2007

    Permalink

    [...] Vía Xyberneticos [...]

  3. fearlex - Gravatar

    fearlex

    7 - 10 - 2007

    Permalink

    Muy bueno, como todos los post aqui, Gracias :D

  4. Cortito y al pie #2 | miROCANROL - Gravatar

    Cortito y al pie #2 | miROCANROL

    7 - 10 - 2007

    Permalink

    [...] Como mostrar imagenes en Pop-ups no intrusivos con CSS. | Vía Xyberneticos [...]

  5. MAR - Gravatar

    MAR

    7 - 10 - 2007

    Permalink

    Auxilio aqui como me contacto para pedir ayuda, mas bien rescate!!

    estoy en un grave apuro con un menu en dreamweaver.... pero el cuento es largo quien me ayuda porfavoooooooooooooooooor



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: