Log In · Register

 
Tiny image to big image on hover?
Ansata
post 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!
 
 
Start new topic
Replies
ZeT0
post 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.
 

Posts in this topic


Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: