Image hover effect awnko

index.html

<section id="promotion_area" class="promotion_area">
<div class="container">
	<div class="row">
		<div class="pormos">			
			<div class="col-md-3 col-sm-6">
					<div class="single_promo portfolio">
						<img  src="img/1.png" alt=""/>
						<p>John Doe</p>
						<span>Asst. Professor, Cooking</span>
						<div class="images-hover">
							<a class="images-search" href="img/chosfeature.png"><i class="fa fa-facebook"></i></a>
							<a class="images-link" href="http://www.lorempixel.com/800/800"><i class="fa fa-linkedin"></i></a>
							
						</div>
					</div>
			</div>							
			<div class="col-md-3 col-sm-6">
					<div class="single_promo portfolio">
						<img src="img/1.png" alt=""/>
						<div class="images-hover">
							<a class="images-search" href="img/home-1.PNG"><i class="fa fa-facebook"></i></a>
							<a class="images-link" href="http://www.lorempixel.com/600/750"><i class="fa fa-linkedin"></i></a>
						</div>
					</div>
			</div>							
			<div class="col-md-3 col-sm-6">
					<div class="single_promo portfolio">
						<img  src="img/1.png" alt=""/>
						<div class="images-hover">
							<a class="images-search" href="#"><i class="fa fa-facebook"></i></a>
							<a class="images-link" href="http://www.lorempixel.com/800/670"><i class="fa fa-linkedin"></i></a>
						</div>
					</div>
			</div>							
			<div class="col-md-3 col-sm-6">
					<div class="single_promo portfolio">
						<img  src="img/1.png" alt=""/>
						<div class="images-hover">
							<a class="images-search" href="#"><i class="fa fa-facebook"></i></a>
							<a class="images-link" href="http://www.lorempixel.com/600/780"><i class="fa fa-linkedin"></i></a>
						</div>
					</div>
			</div>						
		</div>
	</div>	
	</div>
</section>

style.css

.portfolio {
  min-height: 255px;
  position: relative;
}
.portfolio img{
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
  -ms-transition: all 0.9s ease 0s;
  transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  width: 100%;
  height: auto;
}
.portfolio:hover img{}
.images-hover {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.portfolio:hover .images-hover::before{top:0}
.images-hover::before {
  background: #1950A2 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.3;
  position: absolute;
  top: -100%;
  transition: all 1.0s ease 0s;
  -moz-transition: all 1.0s ease 0s;
  -webkit-transition: all 1.0s ease 0s;
  -o-transition: all 1.0s ease 0s;
  -ms-transition: all 1.0s ease 0s;
  width: 100%;
}
.images-hover a {
  background: #1950A2 none repeat scroll 0 0;
  color: #fff;
  margin-top: -16px;
  padding: 5px 10px;
  position: absolute;
  top: 50%;
  transition: all 1.5s ease 0s;
  -moz-transition: all 1.5s ease 0s;
  -webkit-transition: all 1.5s ease 0s;
  -o-transition: all 1.5s ease 0s;
  -ms-transition: all 1.5s ease 0s;
}

.images-hover a.images-search {
  top: -100px;left:40%;margin-left:-10px;
}
.images-hover a.images-link {
  top: -100px;right:40%;margin-right:-10px
}
.images-hover:hover a.images-search{top:50%}
.images-hover:hover a.images-link{top:50%}