Imagenes en miniatura, como crearles el clik y ampliarlas??

Hola.. estoy haciendo una web con muchas galerias de imagenes... resulta q tengo lo siguiente:

[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]

Estas imagenes, las he creado en el html kit, como ven las fotos tienen un tamaño pequeño para que ocupe menos espacio. La pregunta es..
como hacer para que se active la foto en el momento que le pongo el mouse y que se amplie la foto? Comento que las imagenes no estan dentro de ninguna capa ni nada.. simplemente las coloque donde creia conveniente hacerlo. Les agradezco la ayuda prestada.

yo tengo dos imagenes

una en pekeño, y otra en grande

http://www.reparacionderines.com/ubicanos.html

mira en los crokis

saludos

Hola Yaneth.. gracias x la respuesta... Te comento .. he intentado sacar provecho del codigo fuente de la web q me enviaste.. pero si te soy sincero.. como soy novato en esto.. y aun asi habiendo hecho el curso paso a paso me cuesta crear la web.. pues en base a eso y a codigos q tenia en la hoja de estilos.. pues no me salia bien las imagenes.. de resultado pues tengo un orden en las fotos que me gusta como va quedando.. el proble mas q estan muy pegadas unas de otras.. y por mas que le aplico margin padin border y tanto en el html y en la hoja de estilos no logro separarlas.. que debo hacer???

HTML

<div id="fotos"
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>


Y Pues para cuadrarlo un poco en la hoja de estilos le he agregado esto

#fotos {margin: 50px 150px 50px 150px } aqui lo que me hace es q me separa del borde de la web mas no entre fotos.. solucion??

gracias x la atencion prestada

psd- recuerda que son imagenes en miniatura que al darle clic se amplian (esto ya lo tengo hecho)

jovanotti escribió:<div id="fotos"

Para empezar la etiqueta debe quedar completa <div id="fotos">.
Luego los margin se los haz dado al div no al las img.
En estilos crea: a img {margin:50px 150px;} y se te separaran las imagenes.

exacto
le diste el margen al div que los contiene

puedes utilizar la solucion que te dieron, o bien
algo asi

.separar {margenxxxxx}

y en html

[contenido no disponible]

saludos

Hola gjulian.. gracias x el aporte enviado.. pero en este caso no me valio, xq tambien me afecta a la foto que tengo puesta arriba en la zona dond va el logo.
Yaneth respuesta exacta.. por fin pude separar las imagenes..pero el problema que tengo ahora es que quiero darle borde a las fotos, pero lo mismo que antes.. cada vez que retoco la hoja de estilos o el html tratando de meterle el borde.. o unas veces no me funciona u otras veces me retoca la imagen que tengo puesta x logo. (una foto al ancho de la pagina).. como debo hacer para solo retocar las fotos de este codigo??? de hecho me paso algo muy curioso con una tabla que inserte y habiendole dado bordes.. no me aparecieron.. creo q hay algo en la hoja de estilos que no me deja q aparezcan en el html... aunque viendo como me quedo la tabla.. sin los bordes pero espaciado entre renglon y renglon.. pues me guste y asi lo deje.

como aplico el borde a estas fotos, y colocarle algun color al borde?

<div id="fotos">
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>


mi hoja de estilos ahora esta asi..

* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center }
h2 {font.size: 1.1em; color:red ; font-weight: bold ; text-decoration: none ; text-align: center }
body {text-align: center}
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: black ; border: black 1px solid ; height:30px }
#navegacion li {float:left ; list-style:none ; margin: 10px 15px 0px 15px ; padding: 0px 0px 13px 0px ; font-size: 0.9em }
#navegacion ul {margin-left: 21px }
#contenido {background-color: #EED2EE ; border-left: black 1px solid ; border-right: black 1px solid ; padding: 40px 20px 30px 20px }
#contenido p {margin: 15px 5px 0px 10px ; text-indent: 15px }
#menu {width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
#pie {border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#copyright {font-size:0.7em; text-align:center; color:white ; background-color:black ; width: 800px ; font-weight:bold}
.lista {list-style-type: none ; margin:0 ; padding:0 }
#fotos {margin: 50px 50px 50px 50px }
.separar {margin: 30px 20px 30px 20px}

Muchas gracias a la atencion prestada. Salu2