خودتان امتحان کنید

<!DOCTYPE html>
<html lang="fa">
    <head>
        <title>آموزش ساخت افکت تصویر با رویداد hover با css3</title>
        <meta charset="UTF-8" />
        <style>			
		body{
			background-color:#f9f9f9;
		}
		.container{
		position:relative;
		}
		.main{
		position:relative;
			width:680px;
			margin: 0 auto;
		}
		.view {
		   width: 300px;
		   height: 200px;
		   margin: 10px;
		   float: left;
		   border: 10px solid #fff;
		   overflow: hidden;
		   position: relative;
		   text-align: center;
		   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
		   -moz-box-shadow: 1px 1px 2px #e6e6e6;
		   box-shadow: 1px 1px 2px #e6e6e6;
		   cursor: default;
		   background-color: #fff;
		}
		.view a.info {
			display: inline-block;
			text-decoration: none;
			padding: 7px 14px;
			background: #000;
			color: #fff;
			text-transform: uppercase;
			-webkit-box-shadow: 0 0 1px #000;
			-moz-box-shadow: 0 0 1px #000;
			box-shadow: 0 0 1px #000;
		}
		.view img {
		 display: block;
		 width:300px;
		 height:200px; 
		   position: relative;
		   -webkit-transition: all 0.2s ease-in;
		   -moz-transition: all 0.2s ease-in;
		   -o-transition: all 0.2s ease-in;
		   -ms-transition: all 0.2s ease-in;
		   transition: all 0.2s ease-in;
		}
		.view .mask {
		  width: 300px;
		   height: 200px;
		   position: absolute;
		   overflow: hidden;
		   top: 0;
		   left: 0;
		   background-color: rgba(0,0,0,0.6);
		   opacity: 0;
		   -webkit-transform: translate(460px, -100px) rotate(180deg);
		   -moz-transform: translate(460px, -100px) rotate(180deg);
		   -o-transform: translate(460px, -100px) rotate(180deg);
		   -ms-transform: translate(460px, -100px) rotate(180deg);
		   transform: translate(460px, -100px) rotate(180deg);
		   -webkit-transition: all 0.2s 0.4s ease-in-out;
		   -moz-transition: all 0.2s 0.4s ease-in-out;
		   -o-transition: all 0.2s 0.4s ease-in-out;
		   -ms-transition: all 0.2s 0.4s ease-in-out;
		   transition: all 0.2s 0.4s ease-in-out;
		}
		.view h4{
		  text-transform: uppercase;
		   color: #fff;
		   text-align: center;
		   position: relative;
		   font-size: 17px;
		   padding: 10px;
		   background: rgba(0, 0, 0, 0.8);
		   margin: 20px 0 0 0;
		   -webkit-transform: translateY(-100px);
		   -moz-transform: translateY(-100px);
		   -o-transform: translateY(-100px);
		   -ms-transform: translateY(-100px);
		   transform: translateY(-100px);
		   -webkit-transition: all 0.2s ease-in-out;
		   -moz-transition: all 0.2s ease-in-out;
		   -o-transition: all 0.2s ease-in-out;
		   -ms-transition: all 0.2s ease-in-out;
		   transition: all 0.2s ease-in-out;
		}
		.view p {
		  font-family: Georgia, serif;
		   font-style: italic;
		   font-size: 12px;
		   position: relative;
		   color: #fff;
		   padding: 10px 20px 20px;
		   text-align: center;
		   -webkit-transform: translateX(300px) rotate(90deg);
		   -moz-transform: translateX(300px) rotate(90deg);
		   -o-transform: translateX(300px) rotate(90deg);
		   -ms-transform: translateX(300px) rotate(90deg);
		   transform: translateX(300px) rotate(90deg);
		   -webkit-transition: all 0.2s ease-in-out;
		   -moz-transition: all 0.2s ease-in-out;
		   -o-transition: all 0.2s ease-in-out;
		   -ms-transition: all 0.2s ease-in-out;
		   transition: all 0.2s ease-in-out;
		}
		.view a.info {
		   -webkit-transform: translateY(-200px);
		   -moz-transform: translateY(-200px);
		   -o-transform: translateY(-200px);
		   -ms-transform: translateY(-200px);
		   transform: translateY(-200px);
		   -webkit-transition: all 0.2s ease-in-out;
		   -moz-transition: all 0.2s ease-in-out;
		   -o-transition: all 0.2s ease-in-out;
		   -ms-transition: all 0.2s ease-in-out;
		   transition: all 0.2s ease-in-out;
		}
		.view:hover .mask {
		   opacity: 1;
		   -webkit-transition-delay: 0s;
		   -moz-transition-delay: 0s;
		   -o-transition-delay: 0s;
		   -ms-transition-delay: 0s;
		   transition-delay: 0s;
		   -webkit-transform: translate(0px, 0px);
		   -moz-transform: translate(0px, 0px);
		   -o-transform: translate(0px, 0px);
		   -ms-transform: translate(0px, 0px);
		   transform: translate(0px, 0px);
		}
		.view:hover h4 {
		   -webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
		   -o-transform: translateY(0px);
		   -ms-transform: translateY(0px);
		   transform: translateY(0px);
		   -webkit-transition-delay: 0.5s;
		   -moz-transition-delay: 0.5s;
		   -o-transition-delay: 0.5s;
		   -ms-transition-delay: 0.5s;
		   transition-delay: 0.5s;
		}
		.view:hover p {
		   -webkit-transform: translateX(0px) rotate(0deg);
		   -moz-transform: translateX(0px) rotate(0deg);
		   -o-transform: translateX(0px) rotate(0deg);
		   -ms-transform: translateX(0px) rotate(0deg);
		   transform: translateX(0px) rotate(0deg);
		   -webkit-transition-delay: 0.4s;
		   -moz-transition-delay: 0.4s;
		   -o-transition-delay: 0.4s;
		   -ms-transition-delay: 0.4s;
		   transition-delay: 0.4s;
		}
		.view:hover a.info {
		   -webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
		   -o-transform: translateY(0px);
		   -ms-transform: translateY(0px);
		   transform: translateY(0px);
		   -webkit-transition-delay: 0.3s;
		   -moz-transition-delay: 0.3s;
		   -o-transition-delay: 0.3s;
		   -ms-transition-delay: 0.3s;
		   transition-delay: 0.3s;
		}
		</style>
    </head>
    <body>
    
    <div class="container">
    
        <div class="main">
            
            <div class="view">
            <img src="project_base/1.jpg">
            <div class="mask">
               <h4>عنوان</h4>
               <p>متن</p>
               <a href="#" class="info">بیشتر</a>            
            </div>
            </div>                        
            
            <div class="view">
            <img src="project_base/2.jpg">
            <div class="mask">
               <h4>عنوان</h4>
               <p>متن</p>
               <a href="#" class="info">بیشتر</a>            
            </div>
            </div>                        
            
            <div class="view">
            <img src="project_base/3.jpg">
            <div class="mask">
               <h4>عنوان</h4>
               <p>متن</p>
               <a href="#" class="info">بیشتر</a>            
            </div>
            </div>                        
            
            <div class="view">
            <img src="project_base/4.jpg">
            <div class="mask">
               <h4>عنوان</h4>
               <p>متن</p>
               <a href="#" class="info">بیشتر</a>            
            </div>
            </div>
        
        
        </div>
    </div>
    
    
    </body>
</html>

Report a Problem: