<div id="boxercontainer">
  <img src="http://vignette2.wikia.nocookie.net/disneyfanon/images/2/21/Businessman.png" alt>
  <div>
    <h1>Lorem Ipsum?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>
</div>

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #fff;
  background: #444;
  font-family:Tahoma;
}
#boxercontainer {
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  background-image: url(http://c4curry.com/wp-content/uploads/revslider/homepage2/office2-blurred.jpg);
  position: relative;
  padding-bottom: 45%;
  background-size: 120% 120%;
  background-position: 50% 50%;
  overflow: hidden;
  min-height: 650px;
}
#boxercontainer div {
  position: absolute;
  width: 60%;
  left: 20px;
  top: 20px;
  border: 6px solid #000;
  padding: 2rem;
  font-size: 1.2rem;
  background: rgba(0,0,0,0.5);
}
#boxercontainer img { 
  position: absolute;
  bottom: -35px;
  right: 50px;
  width: 40%;
  filter: drop-shadow(-200px 200px 50px #000);
  padding: 1rem;
  z-index: 2;
}
#boxercontainer h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  margin: 0;
}
#boxercontainer p {
  position: relative;
  line-height: 1.5;
  margin: 1rem;
  z-index: 3;
}
@media all and (max-width: 1200px) {
  #boxercontainer { width: 100%; }
}
@media all and (max-width: 875px) {
  #boxercontainer img { 
    width: 50%; 
    right: -50px;
  }
}
@media all and (max-width: 785px) {
  #boxercontainer div { 
    top: 5px; 
    left: 5px; 
    padding: 1rem;
  }
}
@media all and (max-width: 725px) {
  #boxercontainer {
    background-size: contain;
  }
  #boxercontainer img {
    position: relative;
    display: block;
    width: 40%;
    margin: 0 auto;
    margin-top: -5%;
    filter: drop-shadow(-30px 50px 20px rgba(0,0,0,0.8));
  }
  #boxercontainer div {
    width: 80%;
    margin: 1% auto;
    position: relative;
  background: rgba(0,0,0,0.9);
    z-index: 4;
  }
}
@media all and (max-width: 500px) {
  #boxercontainer div {
    width: 90%;
  }
  #boxercontainer img {
    width: 50%;
    padding: 0;
  }
}
const boxer = boxercontainer.querySelector("img"),
maxMove = boxercontainer.offsetWidth / 30,
boxerCenterX = boxer.offsetLeft + (boxer.offsetWidth / 2),
boxerCenterY = boxer.offsetTop + (boxer.offsetHeight / 2),
fluidboxer = window.matchMedia("(min-width: 726px)");

function getMousePos(xRef, yRef) {
  
  let panelRect = boxercontainer.getBoundingClientRect();
  return {
	  x: Math.floor(xRef - panelRect.left) /(panelRect.right-panelRect.left)*boxercontainer.offsetWidth,
	  y: Math.floor(yRef - panelRect.top) / (panelRect.bottom -panelRect.top) * boxercontainer.offsetHeight
    };
}

document.body.addEventListener("mousemove", function(e) {
  let mousePos = getMousePos(e.clientX, e.clientY),
  distX = mousePos.x - boxerCenterX,
  distY = mousePos.y - boxerCenterY;
  if (Math.abs(distX) < 500 && distY < 200 && fluidboxer.matches) {
  boxer.style.transform = "translate("+(-1*distX)/12+"px,"+(-1*distY)/12+"px)";
    boxercontainer.style.backgroundPosition = `calc(50% + ${distX/50}px) calc(50% + ${distY/50}px)`;
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.