Borchani.COM – Blog

Cool CSS Image Pop-up, otra técnica sencilla para lograr el efecto Pop-up en imágenes. 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:

#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:

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