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í.
background-color: #FFFFFF;
left: 10px;
position: relative;
top: 10px;
width: 135px;
}
#pic a .large {
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}
#pic a img {
border: 0;
}
#pic a.p1, #pic a.p1:visited {
background: #FFFFFF;
border: 1px solid #000000;
display: block;
height: 90px;
left: 0;
text-decoration: none;
top: 0;
width: 135px;
}
#pic a.p1:hover {
background-color: #8C97A3;
color: #000000;
text-decoration: none;
}
#pic a.p1:hover .large {
border: 1px solid #000000;
display: block;
height: 233px;
left: 150px;
position: absolute;
top: -60px;
width: 300px;
}
<a class="p1" href="#" title="miniatura">
<img src="imagen/miniatura.jpg" title="miniatura">
<img src="imagen/grande.jpg" class="large"></a>
</p>
Loading ...
Pop-up en imágenes mediante CSS
07-10-2007
Permalink
[...] XYBERNETICOS, nos muestra técnica sencilla para lograr el efecto Pop-up en imágenes, mediante CSS. La idea es [...]
Crear un pop-up con CSS | Freak Group | Diseño web, recursos y mucho más
07-10-2007
Permalink
[...] Vía Xyberneticos [...]
fearlex
07-10-2007
Permalink
Muy bueno, como todos los post aqui, Gracias
Cortito y al pie #2 | miROCANROL
07-10-2007
Permalink
[...] Como mostrar imagenes en Pop-ups no intrusivos con CSS. | Vía Xyberneticos [...]
MAR
07-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