<!-- Built for Divi Theme in WordPress -->
<section> 
<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/michael.png"/><div class="et_overlay"> <div class="info"> <h3>Michael Scott</h3> <h2>Manager</h2> </div></div></div>
<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/dwight.png"/><div class="et_overlay"> <div class="info"> <h3>Dwight Schrute</h3> <h2>Assistant</h2> </div></div></div>
  
<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/jim1.png"/><div class="et_overlay"> <div class="info"> <h3>Jim Halpert</h3> <h2>Assistant</h2> </div></div></div>
  
<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/michael.png"/><div class="et_overlay"> <div class="info"> <h3>Michael Scott</h3> <h2>Visual</h2> </div></div></div>

<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/dwight.png"/><div class="et_overlay"> <div class="info"> <h3>Dwight Schrute</h3> <h2>Interaction</h2> </div></div></div>
  
<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/jim1.png"/><div class="et_overlay"> <div class="info"> <h3>Jim Halpert</h3> <h2>Interaction</h2> </div></div></div>
  
  <div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/michael.png"/><div class="et_overlay"> <div class="info"> <h3>Michael Scott</h3> <h2>Visual</h2> </div></div></div>

<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/dwight.png"/><div class="et_overlay"> <div class="info"> <h3>Dwight Schrute</h3> <h2>Interaction</h2> </div></div></div>
  
<div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/jim1.png"/><div class="et_overlay"> <div class="info"> <h3>Jim Halpert</h3> <h2>Interaction</h2> </div></div></div>
  
  <div class="et_pb_grid_item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/michael.png"/><div class="et_overlay"> <div class="info"> <h3>Michael Scott</h3> <h2>Visual</h2> </div></div></div>


  
  <!-- Demo only -->
  <div class="demo">
    <h1><span> Click</span>  and <span>hold</span>  a face</h1>
  </div>
  
  </section>
  
  


// This is messy & old. I'm sorry. 🙃


@import 'https://codepen.io/latimer2k/pen/oMEMEK.sass';
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro');
@font-face {
  font-family: "Colin Serif";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/ColinSerif-Regular.ttf")format(
      "truetype"
    );
  font-weight: normal;
  font-style: normal;
}


/*----------------*/
/*----------------*/
@font-face {
  font-family: "Colin Serif";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1496249/ColinSerif-Bold.ttf")format("truetype");
  font-weight: 700;
  font-style: normal;
}





/* Layout */
html {
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(90deg, #333, #363b42);
  
}

.demo {
  color: rgba(255,255,255,0.84);
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(90deg, #333, #363b42);
}

h1{
  font-size: 3.5rem;
    font-family: 'Colin Serif', sans-serif;
  font-weight: 700;
}
h3{
  font-size: 1em;
  color: #fff;
  line-height: auto;
  display: flex;
  font-family: 'Source Serif Pro', sans-serif;
}
header, section {
  color: #FFF;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}



/* Images */
.et_pb_grid_item{
  display: block;
  height: calc(100vw / 5);
   width: calc(100% / 5);
  position: relative;
  overflow: hidden;
  float: left;
  margin: 0;
  cursor: pointer;
  margin: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all ease-in-out .3s;

}

.et_pb_grid_item img{
  width: auto;
  height: 140%;
  object-fit: cover;
  display: block;
  transition: all ease-in-out .5s;
  /*
   transform: scale(1) translate(-15%, 5%) !important;*/
  transform: scale(1) translate(-15%, 5%) ;
  
  position: absolute;
  z-index: 99999 !important;
    
}

.et_pb_grid_item:hover {
  img {
    transform: scale(.8) translate(10%, 10%) !important;}
}
.et_pb_grid_item:active {
  img {
    transform: scale(.6) translate(30%, 0%) !important;}
  .info {
    transform: scale(1.3) translate(10%, -3%) !important;
     transition: all ease-in-out .5s;
  }
  
}
/* Color Overlay position */
.et_pb_grid_item::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1e3265;
    mix-blend-mode: lighten;
    transition: all ease-in-out .5s;
    z-index: 99999 !important;
}
/* Removed effects to show original on hover */
.et_pb_grid_item:hover, .et_pb_grid_item:hover img{
  filter: blur(50px);
  -webkit-filter: none !important;
  mix-blend-mode: unset !important;
  background: transparent;
    transition: all ease-in-out .5s;
}



/* Color Overlay settings */
.et_pb_grid_item:nth-of-type(1n) {
  background-color: #f8a31e;
}
.et_pb_grid_item:nth-of-type(1n) img {
  mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1.2);
  
}


.et_pb_grid_item:nth-of-type(2n) {
  background-color: #0bc5b4;
}
.et_pb_grid_item:nth-of-type(2n) img {
  mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1.2);
}



.et_pb_grid_item:nth-of-type(3n) {
  background-color: #d7cdbe;
  .et_pb_grid_item:nth-of-type(3n) img {
  mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1.2);
  }
}






/* Overlay settings */
.et_overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: -100%;
  color: #FFF;
  background-color: rgba(54, 59, 66, 0.0);
  z-index: 0;
}
.et_overlay .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-items: center;
  height: 100%;
  width: 100%;
   transition: all ease-in-out .5s;
}
.et_overlay .info h3 {
  font-size: 1.5vw;
  margin: auto;
  color: #fff;
  position: absolute;
    bottom: 50%;
  left: 8%;
  line-height: auto;
  word-spacing: 500px;
  display: flex;
font-family: 'Colin Serif', sans-serif;
}
.et_overlay .info h2 {
  position: absolute;
  bottom: 37%;
  left: 8%;
  font-family: "Colin Sans", sans-serif;
  font-size: .7vw;
  word-spacing: 20vw;
  opacity: 1;
  letter-spacing: 0.15em;
  line-height: auto;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
}




@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}


View Compiled

// Detect Closest Edge
function closestEdge(x,y,w,h) {
    var topEdgeDist = distMetric(x,y,w/2,0);
    var bottomEdgeDist = distMetric(x,y,w/2,h);
    var leftEdgeDist = distMetric(x,y,0,h/2);
    var rightEdgeDist = distMetric(x,y,w,h/2);
    var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);
    switch (min) {
        case leftEdgeDist:
            return "left";
        case rightEdgeDist:
            return "right";
        case topEdgeDist:
            return "top";
        case bottomEdgeDist:
            return "bottom";
    }
}

//Distance Formula
function distMetric(x,y,x2,y2) {
    var xDiff = x - x2;
    var yDiff = y - y2;
    return (xDiff * xDiff) + (yDiff * yDiff);
}


var et_pb_grid_item = document.querySelectorAll(".et_pb_grid_item");

for(var i = 0; i < et_pb_grid_item.length; i++){

    et_pb_grid_item[i].onmouseenter = function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var edge = closestEdge(x,y,this.clientWidth, this.clientHeight);
        var et_overlay = this.childNodes[1];
        var image = this.childNodes[0];

        switch(edge){
            case "left":
                //tween et_overlay from the left
                et_overlay.style.top = "0%";
                et_overlay.style.left = "-100%";
                TweenMax.to(et_overlay, .5, {left: '0%'});
                TweenMax.to(image, .0, {scale: 1.2});
                break;
            case "right":
                et_overlay.style.top = "0%";
                et_overlay.style.left = "100%";
                //tween et_overlay from the right
                TweenMax.to(et_overlay, .5, {left: '0%'});
                TweenMax.to(image, .0, {scale: 1.2});
                break;
            case "top":
                et_overlay.style.top = "-100%";
                et_overlay.style.left = "0%";
                //tween et_overlay from the right
                TweenMax.to(et_overlay, .5, {top: '0%'});
                TweenMax.to(image, .0, {scale: 1.2});
                break;
            case "bottom":
                et_overlay.style.top = "100%";
                et_overlay.style.left = "0%";
                //tween et_overlay from the right
                TweenMax.to(et_overlay, .5, {top: '0%'});
                TweenMax.to(image, .0, {scale: 1.2});
                break;
        }
    };

   
    et_pb_grid_item[i].onmouseleave = function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var edge = closestEdge(x,y,this.clientWidth, this.clientHeight);
        var et_overlay = this.childNodes[1];
        var image = this.childNodes[0];

        switch(edge){
            case "left":
                TweenMax.to(et_overlay, .6, {left: '-100%'});
                TweenMax.to(image, .0, {scale: 1.0});
                break;
            case "right":
                TweenMax.to(et_overlay, .6, {left: '100%'});
                TweenMax.to(image, .0, {scale: 1.0});
                break;
            case "top":
                TweenMax.to(et_overlay, .6, {top: '-100%'});
                TweenMax.to(image, .0, {scale: 1.0});
                break;
            case "bottom":
                TweenMax.to(et_overlay, .6, {top: '100%'});
                TweenMax.to(image, .0, {scale: 1.0});
                break;
        }
    };
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js