Une idée pour agrandir et afficher une image à l'aide de l'échange CSS_Experience

/* commun style */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* style de diapositives */
.photo { remplissage : 20 px ; arrière-plan : #222 ; largeur : 600 px ; hauteur : 330 px; :#fc0; margin: 0 0 0 5px; padding:0;}
.photo ul {list-style:none; margin:216px background:#333; #666 ; position : relative ; hauteur : 144 px ;}
.photo ul li {display : inline ; largeur : 24 px ; float : gauche : 6px ;}
.photo ul li { display:block; width: 24px; height:24px; curseur: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 {blanc- espace:normal;position :relative;}

.photo ul li a.vert:hover img {position:absolute left:-12px top:-20px width:48px border-; color:#fc0; }
.photo ul li a.hor:hover img {position:absolute left:-20px top:-12px;

.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;top:0;largeur:320px;border:1px solid #fc0; 🎜>.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; ; border:1px solid #fc0; padding:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block position:absolute; ; bordure : 1px solide #666 ; haut : 165px gauche : 0 ; couleur : #ddd ; remplissage normal : 6px ;}


Voir l'effet course à pied :