Hover Эффект

HTML

<div class="featured-thumbnail">
   <img src="http://dbmast.ru/files/responsive-images-demo/images/image01.jpg">
</div>

CSS

img {
  max-width: 100%;
  height: auto;
}
.featured-thumbnail {
  padding: 0;
  overflow: hidden;
	position: relative;
	cursor: pointer;
}
.featured-thumbnail img {
    width: 100%;
    max-width: 550px;
}
.featured-thumbnail::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.featured-thumbnail:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
.featured-thumbnail img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.featured-thumbnail:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}