CodePen

HTML

            
              <div class="grid">
  <img src="http://placekitten.com/150/150" alt="">
  <img src="http://placekitten.com/150/150" alt="">
  <img src="http://placekitten.com/150/150" alt="">
  <img src="http://placekitten.com/150/150" alt="">
  <p class="caption">
  
  </p>
</div>
            
          
!

CSS

            
              grid {

}

.grid img:nth-child(1):hover ~ p.caption:after {
  content: "FIRST IMAGE CAPTION";
  font-size: 22px;
}

.grid img:nth-child(2):hover ~ p.caption:after {
  content: "SECOND IMAGE CAPTION";
  font-size: 22px;
}

.grid img:nth-child(3):hover ~ p.caption:after {
  content: "THIRD IMAGE CAPTION";
  font-size: 22px;
}

.grid img:nth-child(4):hover ~ p.caption:after {
  content: "FOURTH IMAGE CAPTION";
  font-size: 22px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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