css实现在图片下方加文字说明

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<style type="text/css">
.item{
}
.item-top{
width: 300px;
height: 420px;
position: relative;
display:block;
overflow: hidden;
}
.item-top .item-top-text{
background: rgba(190, 195, 191, 0.44);
padding: 10px 20px;
position: absolute;
width: 300px;
height: 20px;
bottom: -60px;
transition: bottom ease .3s;
}
.item-top:HOVER .item-top-text {
	bottom: 0px;
}
</style>

</head>
<body>
<div>
	<div class="item">
		<div class="item-top">
			<a href="javascript:;">
				<img alt="java" src="image/java.jpg">
			</a>
			<div class="item-top-text">
			<a href="javascript:;">测试文本</a>
			</div>
		</div>
</div>

</div>
</body>
</html>

transition: bottom ease .3s;说明:从底部出现

css实现在图片下方加文字说明

相关文章：

你感兴趣的文章：

标签云：