 Fenix de Plata |
"> | 
| Sorel | |
|
 Pop-up en imágenes mediante CSS - 21/6/2011, 8:38 am
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 [Tienes que estar registrado y conectado para ver este vínculo] - Código:
#pic {
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;
} Html Code. - Código:
<p id="pic">
<a class="p1" href="#" title="miniatura">
<img src="imagen/miniatura.jpg" title="miniatura">
<img src="imagen/grande.jpg" class="large"></a>
</p>
|
| Permisos de este foro: | No puedes responder a temas en este foro.
Código [IMG] está Activado Código HTML está Activado
|
|
|
Linear Mode
