CSS Clip Property

Animations using CSS3. But "clip" is supported cross-browser, even IE 4 !!

by OmShiv

HTML

<span>Show</span>
<img src="http://lorempixel.com/640/480/">

CSS

img {
  position: absolute;
  left: 10px;
  top: 60px;
  display: block;
  clip: rect(200px, 400px, 280px, 240px);
  -webkit-transform: scale(2,2);
  -webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

span:hover + img {
  clip: rect(0, 640px, 480px, 0);
  -webkit-transform: scale(1,1);
}

span {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: #09F;
  color: white;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: bold;
  text-shadow: 0 -1px rgba(0,0,0,0.3);
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

span:hover {
  background: #099;
}