CSS - 图片放大展示代码

  代码：

 

< style  type ="text/css" >
/*  ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/slides.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
===================================================================  */
/*  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 solid #666 ;  top : 165px ;  left : 0 ;  color : #ddd ;  font-weight : normal ;  padding : 6px ; }
</ style >




< div  class ="photo" >
< ul >

< li >< a  href ="#nogo1"  class ="hor" >< img  src ="pics/pic_1h.jpg"  alt =""  title =""   />< b > Snow capped mountains </ b ></ a ></ li >
< li >< a  href ="#nogo2"  class ="vert" >< img  src ="pics/pic_1v.jpg"  alt =""  title =""   />< b > Model </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_2h.jpg"  alt =""  title =""   />< b > A fly </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_2v.jpg"  alt =""  title =""   />< b > An eagle </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_3h.jpg"  alt =""  title =""   />< b > Tubes of paint </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_3v.jpg"  alt =""  title =""   />< b > Flowers on a table </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_4h.jpg"  alt =""  title =""   />< b > A clown </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_4v.jpg"  alt =""  title =""   />< b > Painted lady </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_5h.jpg"  alt =""  title =""   />< b > Boat on a river </ b ></ a ></ li >

< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_5v.jpg"  alt =""  title =""   />< b > Underneath the arches </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_6h.jpg"  alt =""  title =""   />< b > Stormy weather </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_6v.jpg"  alt =""  title =""   />< b > A fisheye view </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_7v.jpg"  alt =""  title =""   />< b > A misty morning </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_7h.jpg"  alt =""  title =""   />< b > Rays of light in the forest </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_8v.jpg"  alt =""  title =""   />< b > A tree lined avenue </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_9v.jpg"  alt =""  title =""   />< b > A portrait in black and white </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_8h.jpg"  alt =""  title =""   />< b > Forest walk </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_10v.jpg"  alt =""  title =""   />< b > An old barn </ b ></ a ></ li >

< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_9h.jpg"  alt =""  title =""   />< b > Cold and frosty morning </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_10h.jpg"  alt =""  title =""   />< b > Blue flower </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_11v.jpg"  alt =""  title =""   />< b > White feather </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_11h.jpg"  alt =""  title =""   />< b > White flowers on green leaves </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="vert" >< img  src ="pics/pic_12v.jpg"  alt =""  title =""   />< b > Green and blue with a touch of white </ b ></ a ></ li >
< li >< a  href ="#nogo"  class ="hor" >< img  src ="pics/pic_12h.jpg"  alt =""  title =""   />< b > Ripe tomatoes </ b ></ a ></ li >
</ ul >
</ div >