1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body {8background:#999; 9}10 a {11display: block; 12position: relative; 13width:64px;14height:64px;15margin: 100px auto;16}17 a:hover em {18display:block; 19position:absolute; 20left:26px; /*(a的宽度-em的宽度)/2*/21top:-12px; /*em自身边框宽度的二倍*/22border-width:6px; 23border-style:solid; 24border-color: transparent transparent #fff;/*transparent 用来指定全透明色彩*/ 25}26 a:hover img {27width:58px;28height:58px; 29border:3px solid #fff; 30opacity:1; filter:alpha(opacity:100); 31}32 a img {33width:60px;34height:60px; 35border: 2px solid #dfe8e4; 36background:#040303; 37opacity:0.7; 38filter:alpha(opacity:70); 39}40 </style>41 </head>42 43 <body>44 <a><em></em><img src="img/2.jpg" /></a>45 </body>46 </html>
