Tiny image to big image on hover? Options

[Ansata]

I've been looking for a code so that when you hover over a small image (like a thumbnail) it shows it large.

Thanks in advance!

[fixtatik]

There's a fairly nice way of doing it with CSS, but there's that whole "doesn't work in IE" business. It's somewhat complicated, so I might just write a tutorial for it if you want to know how.

[Ansata]

Ah that's a total bummer! Thanks for the offer on the tutorial, but if it doesn't work in IE, I wont be using it anyways.

Thanks for the feedback though! Now I just have to re-think things I guess lol

[ZeT0]

I'd love if you could write a tutorial!
This band does it in their merch section.
Looks awesome!
http://www.myspace.com/AugustBurnsRed

[Ansata]

Ah! Yes! That's exactly what I want!

[ZeT0]

And in-case you didn't try it, it works in I.E as-well.

[Ansata]

Awesome. Now we just need to figure how they did it.

[ZeT0]

CODE

.UPandUP{position: relative;}

.thumbnail{position: relative;}

.thumbnail:hover{background-color: transparent; }

.thumbnail span{
position: absolute;
background-color: transparent;
background-position:top left;
width: 0px;
padding: 0px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
top: -450;
left: -270px;

}

.thumbnail span img{
border-width: 0;
padding: 0px;
}

.thumbnail:hover span{visibility: visible; top: -500; left: -170px; z-index: 9;}

a.clickherexx{
display:block;
background-position:top left;
height:42px;
width:450px;
float: left;
background-image:url(http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/clickhere.png);
}
a.clickherexx:hover {background-position: top right;}

div.desktops a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0); width: 0px; height: 0px; z-index:1;}

CODE

<div class="UPandUP">
<a class="thumbnail" href="http://www.msplinks.com/MDFodHRwOi8vYmFuZG1lcmNoLnNlZW5vbi5jb20vaW5kZXgucGhwP3Y9YXVndXN0YnVybnNyZWQ="><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/dogSM.png" border="0" /><span><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/dogBG.png" /></span></a><a class="thumbnail" href="http://www.msplinks.com/MDFodHRwOi8vYmFuZG1lcmNoLnNlZW5vbi5jb20vZGV0YWlsLnBocD9wPTc0MDM4JnY9YXVndXN0YnVy
nNyZWR0"><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/perchSM.png" border="0" /><span><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/perchBG.png" /></span></a><a class="thumbnail" href="http://www.msplinks.com/MDFodHRwOi8vYmFuZG1lcmNoLnNlZW5vbi5jb20vZGV0YWlsLnBocD9wPTYyNDA3JnY9YXVndXN0YnVy
nNyZWQ="><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/samSM.png" border="0" /><span><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/samBG.png" /></span></a></div>
<br />
<a class="thumbnail" href="http://www.msplinks.com/MDFodHRwOi8vYmFuZG1lcmNoLnNlZW5vbi5jb20vZGV0YWlsLnBocD9wPTg0NjM4JnY9YXVndXN0YnVy
nNyZWQ="><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/clawSM.png" border="0" /><span><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/clawBG.png" /></span></a><a class="thumbnail" href="http://www.msplinks.com/MDFodHRwOi8vYmFuZG1lcmNoLnNlZW5vbi5jb20vZGV0YWlsLnBocD9wPTc0MDM3JnY9YXVndXN0YnVy
nNyZWQ="><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/wolfSM.png" border="0" /><span><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/wolfBG.png" /></span></a><a class="thumbnail" href="http://www.msplinks.com/MDFodHRwOi8vYmFuZG1lcmNoLnNlZW5vbi5jb20vZGV0YWlsLnBocD9wPTYwODgzJnY9YXVndXN0YnVy
nNyZWQ="><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/saberSM.png" border="0" /><span><img src="http://www.solidstaterecords.com/augustburnsred/guardianMyspace/images/store/saberBG.png" /></span></a></div>
</td></tr>

Probably cbf. Ahaha.

[fixtatik]

Actually, I was referring to a completely different IE problem, one with displaying block elements. The issue in this case isn't :hover, but rather keeping everything in line when hovering. Doing it like the profile ZeT0 linked works in all versions of IE, but the method I used for a profile works as hover over thumbnail > place large image below list of thumbnails.

This is the layout I did it on. There were thumbnails in the "Upcoming Events" and "Past Events" areas, and when a user hovered over them, the larger image would appear in the center of the area below them.

click to enlarge

[ZeT0]

I don't really understand your tutorial all that well.

[ZeT0]

I'll just wait for the tutorial, rather than this little one on one session here dude!
Thanks though.

[fixtatik]

Just submitted it. We'll see if it gets approved. ;)

[Mickey]

Accepted it. Topic closed & moved.