Hover in Portrait Image ✔ Genial Efecto en imagen con【CSS】

Nice effect on image | Genial efecto en imagen al pasar el cursor.

By Lab21

DEMO
HTML

<div class="portrait" id="portrait">
<div class="fill cover-img"></div>
<div class="fill z-10 hover">
<div class="fill cover-img hover-img"></div>
</div>
</div>

CSS

body{margin:0;padding:0;background-color:#222;--translate-x:30px;--translate-y:-20px}
.portrait{width:80%;max-width:600px;margin:0 auto;height:600px;position:relative;overflow:hidden}
.portrait:hover .hover{filter:alpha(Opacity=40);opacity:.4}
.portrait:hover .hover-img{-moz-transform:translate(var(--translate-x),var(--translate-y));-ms-transform:translate(var(--translate-x),var(--translate-y));-webkit-transform:translate(var(--translate-x),var(--translate-y));transform:translate(var(--translate-x),var(--translate-y))}
.fill,.hover-img:after{width:100%;height:100%;position:absolute;top:0;left:0;z-index:5}
.z-10{z-index:10}
.hover{-moz-transition:all 380ms cubic-bezier(0.16,.01,.77,1);-o-transition:all 380ms cubic-bezier(0.16,.01,.77,1);-webkit-transition:all 380ms cubic-bezier(0.16,.01,.77,1);transition:all 380ms cubic-bezier(0.16,.01,.77,1);filter:alpha(Opacity=0);opacity:0}
.hover-img{-moz-transition:opacity,-moz-transform 320ms cubic-bezier(0.16,.01,.77,1);-o-transition:opacity,-o-transform 320ms cubic-bezier(0.16,.01,.77,1);-webkit-transition:opacity,-webkit-transform 320ms cubic-bezier(0.16,.01,.77,1);transition:opacity,transform 320ms cubic-bezier(0.16,.01,.77,1)}
.hover-img:after{content:'';background-color:#FFEB3B;mix-blend-mode:color}
.cover-img{-moz-background-size:cover;-o-background-size:cover;-webkit-background-size:cover;background-size:cover;background-position:top center;background-repeat:no-repeat;background-image:url(https://images.unsplash.com/photo-1486074051793-e41332bf18fc?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7c08dc233ca06b278c5129d67cedb4c8)}

JS

var root = document.getElementById('portrait');

var mouse_monitor = function(e) {
   let x = e.clientX/innerWidth;
   let y = e.clientY/innerHeight;
   
   let move_x = (x>0.5) ? '-30px' : '30px';
   let move_y = (y>0.5) ? '-20px' : '20px';
   
   root.style.setProperty("--translate-x", move_x);
   root.style.setProperty("--translate-y", move_y);
}
root.addEventListener("mousemove", mouse_monitor);
¿Te gusto el post?
¡Compártelo!