码迷,mamicode.com
首页 > Web开发 > 详细

html实现图片遮盖

时间:2015-02-26 10:00:19      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:css   html5   图片   jquery   

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>王琪加油.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		*{margin:3px;padding:0px;}
		.main{width:1010px;background:#ccccff;
			margin:120px auto}
		.main .box{width:230px;height:350px;background:#FFFFFF;
			border-radius:10px;border:2px solid #ffcc33;
				box-shadow:3px 3px 16px #000033;
					overflow:hidden;
					/*float:left;*/
					display:inline-block/*行类会计元素*/;
					margin:6px; /*相对定位*/position:relative;}
		.main .box:hover img{transform:scale(1.8);
				transition:transform 800ms ease-out}/*放大缩小*/
		.main .box .scale{width:230px;height:350px;
			background:rgba(0,0,0,0.5);position:absolute;top:0px;;
				color:#FFFFFF;transform:translateX(-230px);}
		.main .box .scale h3{text-align:center;/*居中*/line-height:60px;}
		.main .box .scale p{font-size:14px;margin:0px 15px;
				line-height:24px;text-indent:2em}
		.main .box:hover .scale{transform:translateX(0px);
			transition:transform 800ms ease-out;}
	</style>
  </head>
	<div class="main">
		<div class="box">
			<img src="img/1.jpg"width="230px" height="350px"/>
			<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/2.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/3.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/4.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/5.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/6.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/7.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/8.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img/9.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img2/1.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img2/2.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
		<div class="box">
			<img src="img2/3.jpg"width="230px" height="350px"/>
				<div class="scale">
				<h3>wo--萌哒哒--王琪!!</h3>
				<p>主要从事矿山机械设计及理论等教学科研工作。
				主持了《刨煤机与采煤机滚筒力学分析及优化设计研究》、
				《滑行刨煤机刨链测力装置研究与设计》、《EBZ-200岩巷掘进机液力风幕集尘风机研制》、
				《矿用瓦斯抽放全自动放水器研制》、《煤层适刨性及其在刨煤机设计中的应用研究》、
				校优秀青年科学研究基金等科研课题,参与了《薄煤层开采技术及装备研究》、
				《煤炭工业采掘重大装备技术政策研究》等科研项目研究。</p>
			</div>
		</div>
	</div>
  <body>
  		
  </body>
</html>
</strong>
技术分享技术分享

html实现图片遮盖

标签:css   html5   图片   jquery   

原文地址:http://blog.csdn.net/u012651389/article/details/43941125

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!