CSS implementation of a picture to enlarge the display of an idea _ experience exchange

This use of pure CSS to achieve the image amplification, really good, looked at before a lot of pure CSS implementation of the image to enlarge the effect of the code, are not ideal, or in this good AH
Look at the following HTML code:

• Snow capped Mountains

Here is the CSS code:
Copy CodeThe code is 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;}

Look at the effect of running:
<! 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 ulLi a img {display:block; width:22px; height:22px; border:1px solid #666; Border-top-color: #ccc;}. Photo ul li A:hover {whi Te-space:normal;position:relative;} . Photo ul Li A.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; Border-color: #fc0;}. ph Oto ul Li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; Border-color: #fc0;}. Photo U L Li A:active,. Photo ul Li A:focus {position:static; outline:0;}. Photo ul Li A:focus.vert img,. Photo ul Li A:active.ver t img {background-color: #000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; pad ding: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; Left0; Color: #ddd; Font-weight:normal; padding:6px;} </style> </pead> <ul> <li><b>snow capped mountains</b></li> </ul> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]

