指上去 凸显细节

先看下这个效果：

觉得还不错吧~~，但是这段代码却是很简单哦，只不过需要加入一小段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

转载于:https://www.cnblogs.com/jackwalk/archive/2011/07/24/2115382.html