CSS production method of image magnification display in Web page

css| Enlarge | Web page

Look at the following HTML code:

<div class= "Photo" >
<ul>
<li><a href= "#nogo1" class= "hor" ><b>snow capped mountains</b></a></li>
</ul>
</div>

Here is the CSS code:

/* Common Styling * *
A {color: #000;}
a:hover {text-decoration:none;}
a:visited {color: #000;}
/* Slides Styling * *
. photo {padding:20px; background: #222; width:600px; height:330px; text-align:left;}
. photo H1 {font-size:14px; font-weight:normal; color: #fc0; margin:0 0 0 5px; padding:0;}
. Photo ul {list-style:none; padding:0 margin:0; width:216px; background: #333; border:1px solid #666; position:relative; height:144px;}
. Photo ul Li {display:inline; width:24px; height:24px; float:left; margin:6px;}
. Photo ul Li a {display:block; width:24px; height:24px; cursor:default; Background:url (pics/arrow.gif) no-repeat;
. Photo ul Li a b {display:none;}
. Photo ul Li a img {display:block; width:22px height:22px; border:1px solid #666; Border-top-color: #ccc;}
. Photo ul Li a:hover {white-space:normal;position:relative;}
. Photo ul Li A.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; Border-color: #fc0;}
. Photo ul Li A.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; Border-color: #fc0;}
. Photo ul Li A:active,. Photo ul Li A:focus {position:static; outline:0;}
. Photo ul Li A:focus.vert img,. Photo ul Li A:active.vert img {background-color: #000; position:absolute; left:260px; top:0 ; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;}
. Photo ul Li A:focus.hor img,. Photo ul Li A:active.hor img {background-color: #000; position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;}
. Photo ul Li A:focus B,. Photo ul Li A:active b {display:block; position:absolute; width:204px height:150px; border:1px s Olid #666; top:165px; left:0; Color: #ddd; Font-weight:normal; padding:6px;}

See Run Effect:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>www.webjx.com special effects show </title><style type=" Text/css ">/* Common, styling {color: #000;} a:hover {text-decoration:none;} a:visited {color: #000;} /* Slides styling */.photo {padding:20px; background: #222; width:600px; height:330px; text-align:left;}. Photo H1 {font-size:14px; font-weight:normal; color: #fc0; margin:0 0 0 5px; padding:0}. Photo ul {list-style:none; padding:0 margin:0; width:216px; background: #333; border:1px solid #666; position:relative; h EIGHT:144PX}. Photo ul Li {display:inline; width:24px; height:24px; float:left; margin:6px;}. Photo ul Li a {display:block; width:24px; height:24px; cursor:default; Background:url (pics/arrow.gif) no-repeat; Photo ul Li a b {display:none}. Photo ul Li a img {disPlay:block; width:22px; height:22px; border:1px solid #666; Border-top-color: #ccc; Photo ul Li a:hover {white-space:normal;position:relative}. Photo ul Li A.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; Border-color: #fc0;} Photo ul Li A.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; Border-color: #fc0;} Photo ul Li A:active,. Photo ul Li A:focus {position:static; outline:0;}. Photo ul Li A:focus.vert img,. Photo ul Li A:active.vert img {background-color: #000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px; Photo ul Li A:focus.hor img,. Photo ul Li A:active.hor img {background-color: #000; position:absolute; left:260px; top:0; w idth:320px; height:240px; border:1px solid #fc0; padding:45px 5px; Photo ul Li A:focus B,. Photo ul Li A:active b {display:block; position:absolute; width:204px; height:150px so Lid #666; top:165px; left:0; Color: #ddd; font-Weight:normal; padding:6px;} </style></pead><div class= "Photo" ><ul><li><a href= "#nogo1" class= "Hor" >< IMG src= "http://www.webjx.com/UploadPic/2007-7/200777204410743.gif" alt= "Web Teaching" title= "/><b>snow capped Mountains</b></a></li></ul></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]