CodePen

HTML

            
              <div class="wrapper slide">
    <img src="http://lorempixel.com/200/200/sports" />
</div>
            
          
!
via HTML Inspector

CSS

            
              .wrapper {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    background: url('http://lorempixel.com/200/200/nature') no-repeat 0 0;
}

.wrapper.slide:hover img {
    margin-top: -200px;
}

.wrapper img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    display: block;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................