CSS悬停图片上，下方出文字效果

最近,我看见一个鼠标悬停在图片上的技巧,引起了我的注意,我认为它是一个很聪明的方式显示更多的细节上的一个元素。我决定试试看,解决的方法很简单。

HTML

该列是由无序的列表项，在每个列表项的缩略图，并在一类项目的包裹详情"info".

<ul>
    <li>
    	<a href="#"><img src="thumbnail.jpg" alt="" /></a>
        <div>
            <h2>Title</h2>
            <p>Short Description</p>
        </div>
    </li>
</ul>

CSS

首先样式列表项，我们添加 position: relative; 到列表项目，然后在悬停我们提出的 z-index 至 99比其他元素上层，不被覆盖。

/*--Column Styles--*/
ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 220px;
	float: left; display: inline;
	margin: 10px; padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}

/*--Thumbnail Styles--*/
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

使用绝对定位转移。信息类10px向左和- 10px顶端。由于。info是使用绝对定位，我们必须有足够的顶部填充所以在内容不重叠的缩略图。要做到这一点，是衡量顶部填充加入10px到缩略图（在我的演示以外，这幅图像高度）。有的加入了对CSS3圆角。我们将隐藏。默认信息，并显示鼠标悬停了。

/*--Details Style--*/
ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Final Thoughts

Go ahead and experiment with this technique! If you have any questions or concerns please don’t hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover issue.