CodePen

HTML

            
              
<figure class="thumb">
  <img src="http://lorempixel.com/output/abstract-q-c-100-100-6.jpg">
  <figcaption>Caption</figcaption>
</figure>

<figure class="thumb">
  <img src="http://lorempixel.com/output/sports-q-c-100-100-6.jpg">
  <figcaption>Caption</figcaption>
</figure>


            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .thumb {  
  margin:25px auto;
  width:100px;
  height:100px;
  background:white;
  border-radius:8px;
}

.thumb img {
  border-radius:8px;
  transition: opacity 0.25s ease;
}

.thumb img:hover {
  opacity:0;
}  

figure.thumb:hover {
  background: rgba(255,165,0, 0.5);
}

figcaption {
  pointer-events: none;
  text-align:center;
  opacity:0;
  height:25px;
  line-height:25px;
  position:relative;
  top:-70px;
}


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

JS

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