PDA

View Full Version : thumbnail Rollover to show larger image


gtlanz
07-22-2008, 08:14 AM
Hi,I am trying to show a larger image on hover over a thumbnail set as a background to a link, but can't get it to work, the rollover image is not hidden and just sits on top. any help please.

This (http://www.godandscience.org/general/image_rollover.html) is what i'm trying to do

<head>
<title>Untitled Document</title>
<style type="text/css">

#wrapper {
width:600px;
height:600px;
margin:0 auto;
padding:0;
text-align:left;
border: 1px solid #CCC;
}

.thumbnail {
width: 139px;
height: 115px;
margin: 100px 15px 15px 0;
padding: 5px;
text-align: center;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#links a {
display:block;
padding-top: 110px;
}
#links a img {
height:0;
width:0;
border-width:0;
}
#links a:hover img {
position: relative;
top: 260px;
left: 90px;
height: 240px;
width: 320px;
border-width: 2px;
border-color: #0ff;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="wrapper">
<div class="links" align="center">
<div class="thumbnail" style="background-image: url(images/small-car.jpg)">
<a href="images/bigger-car.jpg" target="_blank">
new car<img src="images/big-car.jpg" alt="new car" /></a>

</div><!--end of thumbnail-->
</div><!--end of links-->
</div><!---end of wrapper-->

</body>
</html>


note:
small-car.jpg=thumbnail
big-car.jpg= rollover image
bigger-car.jpg =link

tux
07-22-2008, 12:55 PM
Not sure if this will help and I'm not at home to go into this but...

Where you have this....


#links a:hover img {
position: relative;
top: 260px;
left: 90px;
height: 240px;
width: 320px;
border-width: 2px;
border-color: #0ff;
}



.... in the tutorial that you are refering to it as this....


#links a:hover img {
position: relative;
top: -260px;
left: -90px;
height: 240px;
width: 320px;
border-width: 2px;
border-color: #0ff;
}


... note the negative values on 'top' and 'left'

Try it. If no-one has helped further I will try to take a look when I get home after work.

Regards, Paul

gtlanz
07-22-2008, 01:03 PM
If the hover image was hidden yes, but at the moment both ways it's the same result. thanks

gtlanz
07-23-2008, 12:08 PM
Found it, had id #links in the style sheet ,but as a class in html ,works well now as a class.
thanks all.