index.html
<divclass="cover-slide hover-darken inview"><imgclass="img-zoom"src="images/image-1.jpg"alt=""></div>style.scss
@import'mixin';img{max-width:100%;vertical-align:bottom;}.cover-slide{position:relative;overflow:hidden;&::after{content:'';position:absolute;z-index:2;top:0;left:0;right:0;bottom:0;background-color:#eaebe6;@includeanimation($name:kf-cover-slide);}&.inview{&::after{@includeanimation($name:kf-cover-slide,$duration:1.6s,$timing-function:ease-in-out,//$fill-mode:normal);}}}@keyframeskf-cover-slide{0%{left:0;right:100%;}50%{left:0;right:0;}100%{left:100%;right:0;}}.img-zoom{opacity:0;.inview&{opacity:1;transition:transform0.3sease;@includeanimation($name:kf-img-show,$duration:1.6s,$timing-function:ease-in-out,$fill-mode:normal);&:hover{transform:scale(1.1);}}}@keyframeskf-img-show{0%{opacity:0;}50%{opacity:0;}50.1%{opacity:1;transform:scale(1.5);}100%{opacity:1;}}.hover-darken{&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;transition:backgorund-color0.3sease;pointer-events:none;@includeanimation($name:kf-img-show,$duration:1.6s,$timing-function:ease-in-out,$fill-mode:normal);}&:hover::before{background-color:rgba(0,0,0,0.4);}}_mixin.scss
@mixinanimation($name,$duration:1s,$timing-function:ease,$delay:0s,$iteration-count:1,$direction:normal,$fill-mode:forwards){animation:{name:$name;duration:$duration;timing-function:$timing-function;delay:$delay;iteration-count:$iteration-count;direction:$direction;fill-mode:$fill-mode;}}