JSFiddle - React, Tailwind, and code Playground

by ggChris

HTML

<div class="row text-center facility-images">
  <div class="col-xs-12 col-sm-2 vcenter">
    <a class="spring-img" href="#"><img class="facility-logo2" src="#"></a>
    <div class="spring">
      <h4>Spring To Life</h4>
      <p>Facility Info coming soon!</p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-3 vcenter">  
    <a class="treehouse-img" href="#"><img class="facility-logo1" src="#"></a>
    <div class="treehouse">
      <h4>Treehouse</h4>
      <p>Facility Info coming soon</p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-2 vcenter">
    <a class="turning-img" href="#"><img class="facility-logo3" src="#"></a>
    <div class="turning">
      <h4>Turning Point</h4>
      <p>Facility Info coming soon</p>
    </div>
  </div>
</div>

CSS

.spring, .treehouse, .turning { display:none}
.vcenter { width:33%; float:left;}
.vcenter:hover .spring, .vcenter:hover .treehouse, .vcenter:hover .turning { display:block;}