Hover image popup

Hi all!
I want to put a gallery on my website…where images magnify when hovered on the thumbnails. After looking at some examples I found this one has better cross browser support.

My problem is i cant get the thumbnails to line up side by side. It seem to appear ok on the above url page. Shouldn’t we be using floats? I tried with floats but there is a problem with image borders. Can anyone spare some time to take a look…please. Thanks in advance.
Here is the CSS code.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

position: relative;
z-index: 0;

background-color: transparent;
z-index: 50;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */



and the 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>

<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>

Sorry for the long post.
I am posting it here as Sitepoint has better experts who are very helpful.

Floats won’t work. You need to use either absolute or relative positioning for this. The ideas at dynamic drive are good, but also check this site for a better explanation of the techniques and, IMO, an easier way to accomplish your goal. :slight_smile: