<p>Can you hover me please?</p>
<div class="box">
  <div class="face"><img src="http://placehold.it/350/F9F6E7/000000"/>
  </div>
  <div class="shadow"></div>
</div>
.box {
  position: relative;
  display: inline-block;
  font-size: 0;
  
  .face,
  .shadow {
    transition: all 0.6s ease-in-out;
  }
  
  &:hover {
    .face,
    .shadow {
      transform: rotateX(0) rotateZ(0);
      transition: all 0.6s ease-in-out;      
    }
    
    .shadow {
      box-shadow: 0 0 15px #ccc;    
    }
  }  
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;  
  z-index: -1;
  box-shadow: -60px 60px 15px #eee;    
}

.face {
  $thickness: 15px;
  $color: #ddd;
  
  position: relative;
  display: inline-block;
  margin: 0 auto;
  background-color: #ccc;
  margin: 0 auto;  
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  
  &:before {
    content: "";
    position: absolute;
    bottom: -$thickness / 2;
    left: 0;
    background-color: $color;
    width: 100%;
    height: $thickness;
    display: block;
    transform: rotateX(90deg) translateY(-$thickness / 2);
  }
  
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: -$thickness / 2;
    width: $thickness;
    height: 100%;
    background-color: darken($color, 10%);
    transform: rotateY(90deg) translateX($thickness / 2);
  }
}

/*
Demo stuff
*/
body {
  font-size: 100%;
  text-align: center;
  font-family: 'La Belle Aurore', cursive;
  font-size: 35px;
  
  img {
    display: block;
  }
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=La+Belle+Aurore

External JavaScript

This Pen doesn't use any external JavaScript resources.