Some hex

by Vladimir

HTML

<div class="wrapper">
<div class="img">
test
</div>
</div>

CSS

.wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: #f00;
  padding: 5px;
  -webkit-clip-path: polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
transition: all 500ms;
    position: absolute;
    left: 0px;
    top: 0px;
}
.wrapper:hover {
    width: 0px;
    height: 0px;
    left: 100px;
    top: 100px;
    transition: all 500ms;
}
.img {
  background: url('http://bennettfeely.com/clippy/pics/miami.jpg');
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
}