Change onhover mouseover image popup gallery

HTML & CSS
1

hello everyone.

i have a popup gallery on my website it can be seen herehttp://www.cambridgeupholstery.co.uk/apr12/gallery.asp

what is happening at the moment is that when you mouseover an image, the preview appears beneath the thumbnail and slightly to the right. what i would like is for the image to preview dead centre in the middle of the page. i would also like the user to be able to click on the image to close the previewer.

my code is below, thanks in advance if anyone has the time to change this for me


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="style.css">

<title>Furniture Re-Upholstery</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<meta name="description" content="" />

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
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 */

}

img.thumb {border:0px;padding:0px;}
</style>

</head>

<body>
	<div id="wrap" class="clearfix">

		<div id="main">
			
			<table width="800" cellpadding="0" border="0">
				<tr>
					
					<td width="36"></td>

					<td width="462" valign="top" align="center">
						<a class="piclink" href="" ><img class="logo" src="images\\Cambridge-Upholstery-Logo.gif" /></a>					
						<p class="menutext"><b>Home</b> | <a class="piclink" href="chairs.asp" >Chairs</a> | <a class="piclink" href="sofas.asp" >Sofas</a> | <a class="piclink" href="cushions.asp" >Cushions</a> | <!--<a class="piclink" href="fabrics.asp" >Fabrics</a> | --><a class="piclink" href="gallery.asp">Gallery</a> | <a class="piclink" href="contact.asp" >Contact</a></p>

						<table width="462" cellpadding="0" border="0">
						<tr>
						<td width="144">
						<div style="margin-top:30px;width:142px;height:142px;background-image:url('images/Re-Upholstery.gif');">
						<p class="menubox">Chairs</p>
						</div>
						</td>
						<td width="20"></td>
						<td width="144">
						<div style="margin-top:30px;width:142px;height:142px;background-image:url('images/Loose-Covers.gif');">
						<p class="menubox">Sofas</p>
						</div>
						</td>
						<td width="20"></td>
						<td width="144">
						<div style="margin-top:30px;width:142px;height:142px;background-image:url('images/Cushions.gif');">
						<p class="menubox">Cushions</p>
						</div>
					
						</td>
						</tr>
						</table>




							
<h1 class="mainheading">Gallery</h1>

<p class="maintext">Click on an image to enlarge</p>

						<table width="402" cellpadding="0" cellspacing="0" border="0">
						<tr><td valign="top" align="left">
						
						<a class="thumbnail" href="#thumb"><img class="thumb" src="gallery\\antique-three-piece.gif" width="213" height="140" /><span><img src="gallery\\antique-three-piece.gif" /></span></a>
						
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-top:30px;margin-left:9px;" src="gallery\\brown-leather-armchair.gif" width="176" height="140" /><span><img src="gallery\\brown-leather-armchair.gif" /></span></a>

						</td></tr>
						<tr><td valign="top" align="left">

						<a class="thumbnail" href="#thumb"><img class="thumb" src="gallery\\chaise-longue.gif" width="146" height="100" /><span><img src="gallery\\chaise-longue.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-top:9px;margin-left:9px;" src="gallery\\deep-buttoned-chaise-longue.gif" width="88" height="100" /><span><img src="gallery\\deep-buttoned-chaise-longue.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-left:9px;" src="gallery\	wo-seater-sofa.gif" width="141" height="100" /><span><img src="gallery\	wo-seater-sofa.gif" /></span></a>
	
						</td></tr>
						<tr><td valign="top" align="left">

						<a class="thumbnail" href="#thumb"><img class="thumb" src="gallery\\stripped-armchair.gif" width="194" height="147" /><span><img src="gallery\\stripped-armchair.gif" /></span></a>

						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-top:9px;margin-left:9px;" src="gallery\\reproduction-armchair.gif" width="194" height="147" /><span><img src="gallery\\reproduction-armchair.gif" /></span></a>

						</td></tr>

<tr><td valign="top" align="left">

						<a class="thumbnail" href="#thumb"><img class="thumb" src="gallery\	hree-seater-bench.gif" width="108" height="85" /><span><img src="gallery\	hree-seater-bench.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-top:9px;margin-left:9px;" src="gallery\\small-fabric-chair.gif" width="145" height="85" /><span><img src="gallery\\small-fabric-chair.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-left:9px;" src="gallery\	wo-green-chairs.gif" width="122" height="85" /><span><img src="gallery\	wo-green-chairs.gif" /></span></a>

						
						
						</td></tr>
						<tr><td valign="top" align="left">

						<a class="thumbnail" href="#thumb"><img class="thumb" src="gallery\\cream-armchairs.gif" width="143" height="75" /><span><img src="gallery\\cream-armchairs.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-top:9px;margin-left:9px;" src="gallery\\green-fabric-sofa.gif" width="123" height="75" /><span><img src="gallery\\green-fabric-sofa.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-left:9px;" src="gallery\\custom-fabric-armchairs.gif" width="109" height="75" /><span><img src="gallery\\custom-fabric-armchairs.gif" /></span></a>

						</td></tr>
						<tr><td valign="top" align="left">

						<a class="thumbnail" href="#thumb"><img class="thumb" src="gallery\\fabric-sofa-reupholster.gif" width="194" height="143" /><span><img src="gallery\\fabric-sofa-reupholster.gif" /></span></a>
						<a class="thumbnail" href="#thumb"><img class="thumb" style="margin-top:9px;margin-left:9px;" src="gallery\\upholstered-fabric-sofa.gif" width="194" height="143" /><span><img src="gallery\\upholstered-fabric-sofa.gif" /></span></a>


						
						</td></tr>
						</table>

						<br /><br /><br />
					
					
					</td>
					
					<td width="36"></td>

					<td width="230" valign="top" align="center">
						<!--#include virtual="\\apr12\\right.asp"-->
					</td>
					
					<td width="36"></td>

				</tr>
			</table>

		</div>

	</div>

</body>

</html>
2

Getting the image to display in the center of the screen is tough with CSS, but it can be done.

Getting the image to go away when the user clicks on it is possibly doable with CSS, but honestly, it’s a behavior. JavaScript seems like it would be more appropriate. Have you considered using a lightbox script instead of trying to do this with just CSS?

The bad news is that, regardless of how you want to do it, you’ll probably have to make some adjustments to your HTML. Sorry :confused:

3

Hi,

I have to agree with the above post and this sort of thing should be done with javascript there are some css3 versions using :target but are only working i modern browsers.

If your image is the same size then you can centre it easily like this:


.thumbnail:hover span, .thumbnail span {
	background-color: lightyellow;
	color: black;
	left: -1000px;
	padding: 5px;
	position: fixed;
	text-decoration: none;
	visibility: hidden;
	z-index:0;
}
.thumbnail:active span, .thumbnail:focus span {
	visibility: visible;
	top:50%;
	left:50%;
	margin-top:-160px;
	margin-left:-200px;
	z-index:999;
}
.thumbnail:hover { z-index:0 }
.thumbnail:active, .thumbnail:focus {
	position:relative;
	z-index:999;
}

You have to click the thumbnail to show the image and then click the image to make it go away. It only works in Firefox and IE but in webkit you have to click and hold the mouse button to see the image.

All in all a script would be the best choice here.