Tiny image to big image on hover? |
Tiny image to big image on hover? |
Nov 16 2009, 05:50 PM
Post
#1
|
|
![]() Senior Member ![]() ![]() ![]() Group: Member Posts: 33 Joined: Sep 2005 Member No: 224,772 |
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! |
|
|
|
![]() |
Nov 18 2009, 12:30 AM
Post
#2
|
|
![]() Senior Member ![]() ![]() ![]() ![]() Group: Member Posts: 253 Joined: Jul 2009 Member No: 739,898 |
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. |
|
|
|
Ansata Tiny image to big image on hover? Nov 16 2009, 05:50 PM
fixtatik There's a fairly nice way of doing it with CSS... Nov 17 2009, 08:00 PM
Ansata Ah that's a total bummer! Thanks for the ... Nov 17 2009, 09:02 PM
ZeT0 I'd love if you could write a tutorial!
Th... Nov 17 2009, 10:02 PM
Ansata Ah! Yes! That's exactly what I want... Nov 17 2009, 11:40 PM
ZeT0 And in-case you didn't try it, it works in I.E... Nov 17 2009, 11:57 PM
Ansata Awesome. Now we just need to figure how they did ... Nov 18 2009, 12:04 AM
fixtatik Actually, I was referring to a completely differen... Nov 18 2009, 12:33 PM
ZeT0 I don't really understand your tutorial all th... Nov 18 2009, 07:33 PM
ZeT0 I'll just wait for the tutorial, rather than t... Nov 18 2009, 07:48 PM
fixtatik Just submitted it. We'll see if it gets approv... Nov 19 2009, 09:35 AM
Mike Accepted it. Topic closed & moved. Nov 19 2009, 03:32 PM![]() ![]() |