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