Efecto zoom de imagen utilizando solo Css

Por el 28 de mayo de 2006

en: Sin categoría

Magnífico efecto zoom para fotografías que unicamente utiliza una hoja de estilos Css,es muy sencillo de utilizar y crea un efecto realmente vistoso.
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML.

En este css podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo “style”.
Para ver el resultado de este sólo tienes que colocar el puntero justo debajo de la letra M en la etiqueta ZOOM que hay encima de la imagen:
Efecto zoom de imagen utilizando solo Css

ZOOM

<head></p> <style type="text/css"> #info {position:relative;} #magnifier {display:inline; position:relative; width:240px; height:210px; z-index:100; float:left; margin:0 20px 10px 0; background:url(graphics/enlarge.gif) no-repeat;}</p> <p>#cover1 {position:absolute; top:0; left:0; width:24px; height:30px; background:transparent;} #cover2 {position:absolute; top:0; left:48px; width:240px; height:30px; background:transparent;}</p> <p>#magnifier img {position:absolute; width:240px; height:180px; top:30px; left:-240px;}</p> <p>#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;} </p> <p>#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0; background:transparent;}</p> <p>#magnifier li.one {left:0;}</p> <p>#magnifier li:hover {width:24px; height:24px; left:0;} #magnifier li.ten:hover {width:24px; height:24px; left:24px;}</p> <p>#magnifier li.one:hover img {width:280px; height:210px; left:-240px;} #magnifier li.two:hover img {width:320px; height:240px; left:-216px;} #magnifier li.three:hover img {width:360px; height:270px; left:-192px;} #magnifier li.four:hover img {width:400px; height:300px; left:-168px;} #magnifier li.five:hover img {width:440px; height:330px; left:-144px;} #magnifier li.six:hover img {width:480px; height:360px; left:-120px;} #magnifier li.seven:hover img {width:520px; height:390px; left:-96px;} #magnifier li.eight:hover img {width:560px; height:420px; left:-72px;} #magnifier li.nine:hover img {width:600px; height:450px; left:-48px;} #magnifier li.ten:hover img {width:640px; height:480px; left:-48px;} #magnifier li.eleven:hover img {width:240px; height:180px; left:-24px;} </p> <p>#magnifier table {border:0; padding:0; margin:0; border-collapse:collapse;} </style> <p></p> <p></head></p> <p><body></p> <div id="wrapper"> <div id="info"> <div id="magnifier"><H5>Sitúa X aqui tu puntero para zoom</H5></p> <ul> <li class="one"><a class="aone" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="two"><a class="atwo" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="three"><a class="athree" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="four"><a class="afour" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="five"><a class="afive" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="six"><a class="asix" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="seven"><a class="aseven" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="eight"><a class="aeight" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="nine"><a class="anine" href="#nogo9"></a><br /> <table> <tr> <td> <ul> <li class="ten"><a class="aten" href="#nogo"></a><br /> <table> <tr> <td> <ul> <li class="eleven"><a class="aeleven" href="#nogo"></a><br /> <table> <tr> <td> <p> <img src="http://www.tufuncion.com/images/tufuncionblanco.jpg" alt="Sparrow" title="Sparrow" /></p> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> </td> </tr> </table> <p></li> </ul> <div id="cover1"></div> <div id="cover2"></div> </div> <p>

Entradas relacionadas:

Efecto zoom de imagen utilizando solo Css

ZOOM

Dejar un comentario

Últimas entradas

Suscripción

POR RSS

POR EMAIL

Enlaces