Efecto zoom de imagen utilizando solo Css

21 de septiembre de 2007

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:

Sitúa X aqui tu puntero para 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;}

#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;}

#magnifier img {position:absolute; width:240px; height:180px; top:30px; left:-240px;}

#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;}

#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0; background:transparent;}

#magnifier li.one {left:0;}

#magnifier li:hover {width:24px; height:24px; left:0;}
#magnifier li.ten:hover {width:24px; height:24px; left:24px;}

#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;}

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

Manu Gutierrez

Manual

Taller de CSS

Crear una barra de navegación lateral con listas y CSS

Hacks CSS