CodePen

HTML

            
              
<div class="image-box">
  <div class="image-container">
    <img width="200" height="150" src="http://lorempixel.com/200/150/food/1" alt="Food">
  </div>
  <div class="image-details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna...</p>
  </div>
</div>

<div class="image-box">
  <div class="image-container">
    <img width="200" height="150" src="http://lorempixel.com/200/150/food/2" alt="Food">
  </div>
  <div class="image-details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna...</p>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {margin:0;padding:0}

body {
  background-color:#eee;
  overflow:hidden;
  padding:50px;
}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  margin:0 2px 2px 0;
  float:left;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.image-container,
.image-details {
  height:150px;
  padding:5px 5px;
  transition:margin-top .4s ease-in-out .4s;
}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
}

.image-details h4 {font-size:120%}

.image-box:hover .image-container {margin-top:-160px}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // http://css-tricks.com/forums/discussion/22793/google-chrome-webstore-rollover
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................