前端图片的效果

下边的是一个描述性的图面效果

原始的图片效果：
前端图片的效果
最后的效果图：

就是鼠标指上去的时候，世界高塔四个大字上弹，下边显出描述性的语句~

代码如下：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>上弹描述</title> 
	<style>  	   
	 .col-md-3 {  
		 position: relative;  
		 min-height: 1px;   
		 padding-right: 15px;   
		 padding-left: 15px; 
	 } 
	 @media (min-width: 992px){
 		.col-md-3{
   			float: left;
  		 }
	  	.col-md-3 {
	  		  width: 25%;
  		 }
	}
	.hovereffect {
	    overflow: hidden;
	    position: relative;
	    text-align: center;
	}
	.hovereffect .overlay {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  overflow: hidden;
	  top: 0;
	  left: 0;
	  -webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
	  transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
	}
	.hovereffect:hover .overlay {
 		 background-color:rgba(67, 56, 79, 0.49);/*<!--文字弹起时图片的透明覆盖-->*/
	}
	.hovereffect img {
	  display: block;
	  position: relative;
	}
	.hovereffect h4 {
	  	text-transform: uppercase;
    		color: #fff;/*初始图片文字文字的颜色*/
   		text-align: center;
  		position: relative;
    		font-size: 1.3em;
    		padding: 10px 0;
    		width: 60%;
    		margin: 0 auto;
    		font-weight: 600;
	    	background: rgba(0, 186, 102, 0.55);/*初始图片文字文字的背景*/
	    -webkit-transform:translateY(60px);
   	 	-ms-transform:translateY(60px);
   	 	transform:translateY(60px);
   		 -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
   		 transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
	}
	.hovereffect:hover h4 {
	  -webkit-transform: translateY(20px);
	  -ms-transform: translateY(20px);
	  transform: translateY(20px);
	  -moz-transform: translateY(20px);
	  -o-transform: translateY(20px);
	}
	.hovereffect p{
	    text-transform: uppercase;
	    color: #fff;
	    background-color: transparent;
	    opacity: 0;
	    filter: alpha(opacity=0);
	    -webkit-transform: scale(0);
	    -ms-transform: scale(0);
	    transform: scale(0);
	    -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
	    transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
	    font-weight: normal;
	    margin: 0;
	    padding: 3em 2em 0em;
	    letter-spacing: 2px;
	}
	.hovereffect:hover p{
		 opacity: 1;
		 filter: alpha(opacity=100);
		 -webkit-transform: scale(1);
		 -ms-transform: scale(1);
		 transform: scale(1);
	}
	
</style>
</head>
<body>
	<div id="img">
		<div class="col-md-3">
			<div class="hovereffect w3ls_banner_bottom_grid">
				<img src="../images/g2.jpg" alt=" " class="img-responsive" />
				<div class="overlay">
					<h4>世界高塔</h4>
					<p>东方明珠</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

下边的是一个描述性的图面效果

相关推荐