Expansor de imágenes

Con un código CSS y otro de HTML, podemos exponer, en pequeñito, las imágenes que elijamos... o fotos de quienes somos... o fotos de nuestros vajes... cuadros que nos gustan...

Y ampliarlas con sólo pasar el ratón por encima-pop-up-... y añadirles un comentario.

He colocado-una vez expandida mi plantilla, el código CSS antes del cierre de "skin". Y el código HTML justo detrás del "header-wrapper" y justo antes del "b:section class="header" id="header".

Luego, he cambiado las URL de "src=" por las de mis imágenes, y he añadido detrás el texto que me ha parecido, en lugar del que trae el código para las fotos que incluye. Este es el código original:

CSS:

<style type="text/css"><br /><br />/*Credits: Dynamic Drive CSS Library */<br />/*URL: http://www.dynamicdrive.com/style/ */<br /><br />.thumbnail{<br />position: relative;<br />z-index: 0;<br />}<br /><br />.thumbnail:hover{<br />background-color: transparent;<br />z-index: 50;<br />}<br /><br />.thumbnail span{ /*CSS for enlarged image*/<br />position: absolute;<br />background-color: lightyellow;<br />padding: 5px;<br />left: -1000px;<br />border: 1px dashed gray;<br />visibility: hidden;<br />color: black;<br />text-decoration: none;<br />}<br /><br />.thumbnail span img{ /*CSS for enlarged image*/<br />border-width: 0;<br />padding: 2px;<br />}<br /><br />.thumbnail:hover span{ /*CSS for enlarged image on hover*/<br />visibility: visible;<br />top: 0;<br />left: 60px; /*position where enlarged image should offset horizontally */<br /><br />}<br /><br /></style><br />


HTML:

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a><br /><br /><a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a><br /><br /><br /><br /><br /><br /><br /><a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br /><br /><a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a><br />


Es de Dinamic Drive CSS Library y podéis ver el resultado enla cabecera de "Clásica"