CSS implementation of a picture amplification display of a thought _ experience exchange

This is achieved with a pure CSS image amplification effect, really good, saw a lot of previous use of a pure CSS to achieve the image magnification code, are not ideal, or in this good AH
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:

Copy Code code as follows:

/* 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.52css.com</title> <style type=" TEXT/CSS ">/* 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: 1px solid #666; top:165px; left:0; Color: #ddd; Font-weight:normal; padding:6px;} </style> </pead> <div class= "Photo" > <ul> <li><b>snow capped mountains</b> </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]