Vamos a ver si esto te funciona
Solo lo puedes ahcer editando tu CSS y pon esto:
Código HTML:
#containerEx2 {
clear: both;
width: 150px;
margin: 0 auto;
min-height: 120px;
}
#ex2 img{
height: 120px;
width: 150px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
} #ex2 img:hover {
height: 130px;
width: 165px;
margin-left: 0px;
}
Eso hará las imágenes más grandes como el efecto "
zoom"
A las imágenes tienes que ponerles este "
id" y el "
class" para que funcione (este ejemplo claro)
Código HTML:
<div id="containerEx2">
<div id="ex2">
<a href="fondo (4).jpg" class="thickbox" title="Ejemplo ThickBox">
<img src="fondo (4)Chica.jpg" width="150" height="120" /></a> <a href="fondo (10).jpg" class="thickbox" title="Ejemplo ThickBox">
<a href="fondo (18).jpg" class="thickbox" title="Ejemplo ThickBox">
<img src="fondo (18)Chica.jpg" width="150" height="120" /></a> </div></div>
Eso se lo añades a tu página y listo con eso queda, yo lo hice junto con una ventana flotante, le añadi esto en el
head:
Código HTML:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />
Y se ve algo asi:
http://www.grupokumiko.com/generales...aFlotante.html
Espero y te sirva, saludos.