Agrandar imágenes con sólo CSS

Ya he comentado sobre el tema en otra ocasión: ahora se trata de la manera de Stu Nichols. Sólo CSS y (para ser sinceros) bastante complicadita.

• 
  
  • 
    
    • 
      
      • 
        
        • 
          
          • 
            
            • 
              
              • 
                
                • 
                  
                  • 
                    
                    • 
                      
                      
                    
                    
                  
                  
                
                
              
              
            
            
          
          
        
        
      
      
    
    
  
  

Photograph by Iva Villi

Vamos a ello:

.- El estilo (CSS), a insertar antes del cierre skin de la plantilla. El código ofrece también las correcciones necesarias para que funcione en IE6:

#info {position:relative;}
#info p {margin-left:15px; margin-right:20px;}
#magnifier {display:inline; position:relative; width:240px; height:210px; z-index:100; float:left; margin:0 20px 10px 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3enZeimfod-btKGtgtco_cN6l6tsY__nqdTwBoGoUzEhdluWP3ResSAnjaUYu3LXJD25xjqfB6U-zvcsS8GsU3S7Jl7b56bOLSTiRkl397ocgMwF-5ytb_o933jMF9NlW-kLpMSJiuXg/s400/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;}

.- Ahora, el HTML, a inseertar en la entrada donde queramos ampliar una imagen o donde se desee este efecto:

<div id="magnifier">

<ul>

<li class="one"><!--[if lte IE 6]><a class="aone" href="#nogo"></a><table><tr><td><![endif]-->

<ul>



<li class="two"><!--[if lte IE 6]><a class="atwo" href="#nogo"></a><table><tr><td><![endif]-->

<ul>

<li class="three"><!--[if lte IE 6]><a class="athree" href="#nogo"></a><table><tr><td><![endif]-->

<ul>

<li class="four"><!--[if lte IE 6]><a class="afour" href="#nogo"></a><table><tr><td><![endif]-->

<ul>

<li class="five"><!--[if lte IE 6]><a class="afive" href="#nogo"></a><table><tr><td><![endif]-->

<ul>

<li class="six"><!--[if lte IE 6]><a class="asix" href="#nogo"></a><table><tr><td><![endif]-->



<ul>

<li class="seven"><!--[if lte IE 6]><a class="aseven" href="#nogo"></a><table><tr><td><![endif]-->

<ul>

<li class="eight"><!--[if lte IE 6]><a class="aeight" href="#nogo"></a><table><tr><td><![endif]-->

<ul>

<li class="nine"><!--[if lte IE 6]><a class="anine" href="#nogo9"></a><table><tr><td><![endif]-->

<ul>

<li class="ten"><!--[if lte IE 6]><a class="aten" href="#nogo"></a><table><tr><td><![endif]-->

<ul>



<li class="eleven"><!--[if lte IE 6]><a class="aeleven" href="#nogo"></a><table><tr><td><![endif]-->

<img src="http://www.cssplay.co.uk/menu/graphics/sparrow.jpg" alt="Sparrow" title="Sparrow" />

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>



</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>



<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul></td></tr><!--[if lte IE 6]></a><![endif]--></li>



<div id="cover1"></div>

<div id="cover2"></div>

</div>



<p>Photograph by <a href="http://www.sxc.hu/profile/nahhan">Iva Villi</a></p>



<p>Some authorities also classify the closely related estrildid finches of the equatorial regions and Australasia as members of the Passeridae. Like the true sparrows, the estrildid finches are small, gregarious, and often colonial seed-eaters with short, thick, but pointed bills. They are broadly similar in structure and habits, but tend to be very colourful and vary greatly in their plumage. About 140 species are native to the old world tropics and Australasia. Most taxonomic schemes list the estrildid finches as the separate family Estrildidae, leaving just the true sparrows in Passeridae.</p>



<p>American sparrows, or New World sparrows, are not closely related to the true sparrows, despite some physical resemblance, such as the seed-eaters bill and frequently well-marked heads. They are in the family Emberizidae.</p>



<p>The Hedge Sparrow or Dunnock (Prunella modularis) is similarly unrelated. It is a sparrow in name only, a relic of the old practice of calling any small bird a "sparrow".</p>



<p>Sparrows are small passerine birds. The differences between species can be subtle; in general, sparrows tend to be small plump brownish or greyish birds with short tails and stubby powerful beaks.</p>



<p>Sparrows are primarily seed-eaters, though they also consume small insects. A few species scavenge for food around cities, and like gulls or pigeons will happily eat virtually anything in small quantities.</p>



<p>The Old World true sparrows are found indigenously in Europe, Africa and Asia. In Australia and the Americas, early settlers imported some species which quickly naturalised, particularly in urban and degraded areas. House Sparrows, for example, are now found throughout North America, in every state of Australia except Western Australia, and over much of heavily populated parts of South America.</p>



<p class="padding">Source: <a href="http://en.wikipedia.org/wiki/Sparrow">Wikipedia - The Free Encyclopedia</a></p>

Subid la imagen del gif "enlarge" a vuestro servidor y cambiar la URL de la imagen, así como el texto y todo lo necesario para ajustarlo a vuestros deseos...