<div class="ZoomIt">
<ul>
<li><a href="http://www.slapix.com/lol/i_gots_my_eye_on_you.aspx" title="I gots my eye on you"><img class="zit" src="http://www.slapix.com/img/i2m/i_gots_my_eye_on_you.jpg" /></a></li>
<li><a href="http://www.slapix.com/lol/take_my_advice.aspx" title="Paul McCartney"><img class="zit" src="http://www.slapix.com/img/i2m/take_my_advice.jpg" /></a></li>
<li><a href="http://www.slapix.com/lol/the_greatest_gift_of_all_is.aspx" title="George Harrison"><img class="zit" src="http://www.slapix.com/img/i2m/the_greatest_gift_of_all_is.jpg" /></a></li>
<li><a href="http://www.slapix.com/lol/i_ll_never_be_perfect.aspx" title="I'll never be perfect"><img class="zit" src="http://www.slapix.com/img/i2m/i_ll_never_be_perfect.jpg" /></a></li>
</ul>
<ul>
<li><a href="http://www.slapix.com/lol/where_s_my_hug_today.aspx" title="Where's my hug today"><img class="zit" src="http://www.slapix.com/img/i2m/where_s_my_hug_today.jpg" /></a></li>
<li><a href="http://www.slapix.com/lol/i_m_nice_until_you_screw_it_up.aspx" title="I'm a nice person"><img class="zit" src="http://www.slapix.com/img/i2m/i_m_nice_until_you_screw_it_up.jpg" /></a></li>
<li><a href="http://www.slapix.com/lol/karma_has_no_deadline.aspx" title="Karma has no deadline"><img class="zit" src="http://www.slapix.com/img/i2m/karma_has_no_deadline.jpg" /></a></li>
<li><a href="http://www.slapix.com/lol/you_are_beautiful.aspx" title="You are beautiful"><img class="zit" src="http://www.slapix.com/img/i2m/you_are_beautiful.jpg" /></a></li>
</ul>
</div>
.zit
{
position:relative;
width:100px;
height:80px;
left:0px;
top:0px;
border:1px solid black;
/* Apply a CSS3 Transition to width, height, top and left properties */
transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}
.zit:hover
{
width:200px;
height:170px;
left:-25px;
top:-25px;
z-index:9999;
}
.ZoomIt ul
{
clear:both;
}
.ZoomIt li
{
width:102px;
height:82px;
margin:4px;
float: left;
overflow:visible;
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.