指上去 凸显细节
先看下这个效果：
觉得还不错吧~~，但是这段代码却是很简单哦，只不过需要加入一小段jquery
.hover(function(){ display:blcok},function(){display:none})
我写的比较简单，可以自己补全。
HTML代码
1 <ul class="columns">
2 <li>
3 <a href="http://www.designbombs.com/automotive/virgin-racing/"><img src="" alt=""></a>
4 <div class="info">
5 <h2>Virgin Racing</h2>
6 <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
7 </div>
8 </li>
9 </ul>
CSS代码：
1 ul.columns {
2
3 width: 960px;
4
5 list-style: none;
6
7 margin: 0 auto; padding: 0;
8
9 }
10
11 ul.columns li {
12
13 width: 220px;
14
15 float: left; display: inline;
16
17 margin: 10px; padding: 0;
18
19 position: relative;
20
21 }
22
23 ul.columns li:hover {z-index: 99;}
24
25
26
27 //上面这不是重点~ 重点在下面呢
28
29
30
31 ul.columns li img {
32
33 position: relative;
34
35 filter: alpha(opacity=30);
36
37 opacity: 0.3;
38
39 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
40
41 }
42
43 ul.columns li:hover img{
44
45 z-index: 999;
46
47 filter: alpha(opacity=100);
48
49 opacity: 1;
50
51 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
52
53 }
54
55 ul.columns li .info {
56
57 position: absolute;
58
59 left: -10px; top: -10px;
60
61 padding: 210px 10px 20px;
62
63 width: 220px;
64
65 display: none;
66
67 background: #fff;
68
69 font-size: 1.2em;
70
71 -webkit-border-radius: 3px;
72
73 -moz-border-radius: 3px;
74
75 border-radius: 3px;
76
77 }
78
79 ul.columns li:hover .info {display: block;}
看了这幅图就比较清楚了吧~
这个简单吧，想不到用CSS就轻而易举的实现了~
这篇文章来自：http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css
