Image CLiping

HTML

<div style="background: url(http://www.photographyvox.com/wp-content/uploads/square-photography04.jpg);width: 750px;height: 300px;">
<div class="clipped">
  <h1>This div will be clipped at the bottom</h1>
  <p>Not all browsers fully support <code>clip-path</code>. If you are using Internet Explorer or Edge, this div will appear to be normal.</p>
  <p>A great resource for figuring out what your clip-path code should be is <a href="https://bennettfeely.com/clippy/">https://bennettfeely.com/clippy/</a></p>
</div>
</div>

CSS

body {
  background: #A4B7C9;
  font-family: "Roboto";
  color: black;
}

a {
  color: black;
}

.clipped {
  width: 160px ;
  height: 600px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 30px;
  background: url(https://unsplash.it/750/300?image=1056&blur);
   -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  -webkit-clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.clipped:hover{
  -webkit-clip-path: polygon(0 100%, 100% 0%, 100% 100%, 0% 0%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 1%, 0% 0%);
}