Image getting bigger when hovering

[johnmcjack]

Hi all,

First, sorry to ask a question which was asked already hundrer times, but believe me i've been trying to solve my problem using others' answers for a week and couln't..
I'm at the very beginner level and that must be why.

My problem is simple: i have 3 pictures in a page (--> http://www.vecstore.com/Continent%20Europe2.html ) and would like them to appear bigger in the foreground when the mouse is hover.

My html code for this part is:


<table width="820" border="0" bordercolor="#000000">
<tr>
<th colspan="2" bordercolor="#000000" scope="col"><h2 align="left"><a name="Parisancre" id="Parisancre"></a>France, Paris</h2>
<div id="container">
<div class="thumb">
<p align="center">
<a href="maps/Europa/Metro France Paris1b.png"><img src="maps/Europa/Metro France Paris1s.png" alt="paris map 1s" width="222" height="222" hspace="15" /></a>
<img src="maps/Europa/Metro France Paris2s.png" alt="paris map 2s" width="222" height="222" hspace="15" id="Image1" />
<img src="maps/Europa/Metro France Paris3s.png" alt="paris map 3s" width="222" height="222" hspace="15" /></p></th>
</div>
</tr>


And this for the CSS:


#container {
width:840px;
margin: 10px auto;
backgournd:#f1f1f1;
padding:1px;
border:1px solid #CCC;
}

.thumb {
margin:1px;
position:relative;
display:inline-block;
}

.thumb img {
width:230px;
height:230px;
background:#FFFFFF;
padding:3px;
z-index: 0;
}


If you have an idea what i should do that would be really great, i'm ready to offer a vectorized picture to those who will help :rolleyes: as soon as the website is ready!
Thanks in advance!

[jscheuer1]

There are various ways. Look at:

http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

Another is:

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/

And there's:

http://www.dynamicdrive.com/style/csslibrary/item/css3_hover_image_gallery/


But, if you think about it, a hover gallery isn't a good idea because iphone, android and other touch devices don't recognize hover in the same way as regular computers do.

So you might want a click to enlarge script like:

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

[johnmcjack]

John,
Thanks a lot! Your answer was great and full of good and simple solutions.
Hovergallery worked for me perfectly and was very easy to install.

As promessed, any time you need a vector, just drop me a line! :)
Have a nive evening