An idea of how to enlarge and display an image in CSS

The image amplification effect implemented with pure css is really good. I have read a lot of code that uses pure css to enlarge the image. It is not ideal.
See the following HTML code:
<Div class = "photo">
<Ul>
<Li> <a href = "# nogo1" class = "hor"> <B> Snow capped mountains </ b> </a> </li> </ul>
</Div>
The following 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. vert: hover img {position: absolute; left:-12px; top:-20px; width: 48px; height: 64px; border-color: # fc0 ;}
. Photo ul li. 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 solid #666; top: 165px; left: 0; color: # ddd; font-weight: normal; padding: 6px ;}

View the running effect:Xmlns = "http://www.w3.org/1999/xhtml">

• Snow capped mountains