CodePen

HTML

            
              <figure>
  <img src="http://lorempixum.com/300/200/sports/" />
    <figcaption>
        Some piece of text
    </figcaption>
</figure>

<figure>
  <img src="http://lorempixum.com/300/200/food/" />
    <figcaption>
        Some really long long long long long long piece of text
    </figcaption>
</figure>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              figure {
  width: 300px;
  float: left;
  margin: 10px;
  position: relative;
  overflow: hidden;
}

figure img {
  vertical-align: bottom;
}

figcaption {
  position: absolute;
  bottom: -50%;
  padding: 10px 60px 10px 10px;
  background: rgba(0,0,0,0.7) url(http://ericouture.com/wp-content/themes/Starkers/assets/img/va-credit.png) no-repeat 95% 50%;
  color: white;
  width: 230px;
  transition: all 0.6s ease 0s;
}

figure:hover figcaption {
  bottom: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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