hover.css

<style>
.rollover figure {
  position: relative;
  overflow: hidden;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rollover figure figcaption {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}


.rollover.effect-sarah figure > img {
  max-width: none;
  width: -webkit-calc(120%);
  width: calc(120%);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-13%, 0, 0);
  transform: translate3d(-13%, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rollover.effect-sarah figure .description {
  padding: 1em 0;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.rollover.effect-sarah figure.hovered > img {
  opacity: 0.4;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.rollover.effect-sarah figure.hovered .description {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* end .rollover */
/** Ie9 and under **/
.ie .rollover {
  /* .effect-sarah */
  /* end .effect-sarah */
}
</style>

hover.html

<section class="rollover effect-sarah" style="width:500px; height:500px;">
				<div class="col-sm-6 col-md-4 " >
							
								<figure>
                                
									<img src="https://1.bp.blogspot.com/-TCcemO5cEoY/V8a3SEFRuPI/AAAAAAAAAmM/IQByRuTetvcd6vu_AHmyta0Wi2tUk_zYQCLcB/s320/photo-1440186170739-681f007fc4d1-300x300.jpg" alt="image" class="responsive">
									<figcaption>
										
											<div class="description" style="width:100%px; height:200px; background-color:#930">
											ddd
												
											</div>
									
										
									</figcaption>
								</figure>
								
								
						</div><!-- container -->
			</section>

hover_script

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
<script>
$(document).ready(function(){
 	
		$('[class*="effect-"] figure').hover(function() {
			$(this).addClass('hovered');
		}, function() {
			$(this).removeClass('hovered');
		});
	 
	});
	</script>