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;
}
            
          
!

JS

            
              
            
          
!
999px
Loading ..................