Eine Idee zum Vergrößern und Anzeigen eines Bildes mithilfe des CSS_Experience-Austauschs

Cet effet d'agrandissement d'image obtenu en utilisant du CSS pur est vraiment bon. J'ai vu beaucoup de code qui utilisait du CSS pur pour obtenir l'effet d'agrandissement de l'image, mais ce n'est pas idéal
Regardez le code HTML ci-dessous :

• Montagnes enneigées

Voici le code CSS :

Copier le code Le code est le suivant :

/* 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 a { 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 ;}


Sehen Sie sich den Laufeffekt an:

<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; 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="/static/imghw/default1.png" data-src="/logo.gif" class="lazy" alt="" title=""><b>Schneebedeckte Berge</b></a></li> </ul> </div>