前端的图片效果

下边是一个图片的效果展示

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

中间效果图：
前端的图片效果

这个效果就是一块透明方块从从原本图片的上方划过~

代码如下：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>表层隐动</title> 
<style>  	 	
#img{
   		width: 400px;
   		height: 400px;
   		} 
   		.grid {  
   			position: relative;
   			clear: both;  
   			margin: 0 auto;  
   			max-width: 1000px;  
   			list-style: none;  
   			text-align: center; 
   		} 
	.grid figure {
    		position: relative;
    		overflow: hidden;
   		margin: 10px 0;
   	 	height: auto;
   		text-align: center;
    		cursor: pointer;
    		border: solid 7px #dbdbdb;
	}
	.grid figure img {
 		position: relative;
 		display: block;
 		width: 100%;
 		opacity: 0.8;
	}
	.grid figure figcaption {
 		padding: 7em;
 	  	color: #fff;
  		text-transform: uppercase;
    		font-size: 1.25em;
   		-webkit-backface-visibility: hidden;
    		backface-visibility: hidden;
	}
	.grid figure figcaption::before,
	.grid figure figcaption::after {
 		pointer-events: none;
	}
	.grid figure figcaption,
	.grid figure figcaption > a {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
	}
	.grid figure figcaption > a {
 		z-index: 1000;
 		text-indent: 200%;
 		white-space: nowrap;
 		font-size: 0;
 		opacity: 0;
	}
	.grid figure h3 {
  	 	word-spacing: -0.15em;
   	 	font-size: 1.5em;
    		margin-top: 18%;
    		color: #FFF;
    		font-weight: 600;
	}
	.grid figure h2 span {
 		font-weight: 800;
	}
	figure.effect-apollo img {
 		opacity: 0.95;
 		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 		transition: opacity 0.35s, transform 0.35s;
 		-webkit-transform: scale3d(1.05,1.05,1);
 		transform: scale3d(1.05,1.05,1);
	}
	figure.effect-apollo figcaption::before {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background: rgba(0, 0, 0, 0.5);
    		content: '';
    		-webkit-transition: -webkit-transform 0.6s;
    		transition: transform 0.6s;
    		-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    		transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
	figure.effect-apollo:hover img {
 		opacity: 0.6;
 		-webkit-transform: scale3d(1,1,1);
 		transform: scale3d(1,1,1);	
	}
	figure.effect-apollo:hover figcaption::before {
 		-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
 		transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	}
	figure.effect-apollo:hover p {	
		 opacity: 1;	
		 -webkit-transition-delay: 0.1s;
 		 transition-delay: 0.1s;
	}
</head>
<body>
 <div id="img">
  <div class="grid">
   <figure class="effect-apollo">
     <img src="../images/g3.jpg" alt="" />
     <figcaption></figcaption> 
   </figure> 
  </div>
 </div>
</body>
</html>

下边是一个图片的效果展示

相关推荐