JSFiddle - React, Tailwind, and code Playground

by Nikita Rane

HTML

<div class="page">
    <div class="text">
        <table border="1">
            <tr>
                <td> <span class="title">Hover Here</span>
 <span class="info">
     This text should hover over the images, not effect the bottom images<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text
                    </span>

                </td>
            </tr>
        </table>
    </div>
    <div class="image">
        <img src="http://greentreesarborcareinc.com/wp-content/uploads/2014/01/image-placeholder.jpg" alt="" />
        <img src="http://greentreesarborcareinc.com/wp-content/uploads/2014/01/image-placeholder.jpg" alt="" />
        <img src="http://greentreesarborcareinc.com/wp-content/uploads/2014/01/image-placeholder.jpg" alt="" />
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}
body {
    font-family: helvetica;
    font-size: 18px;
    line-height: 26px;
}
div.page {
    width:80%;
    max-width:960px;
    height:100%;
    background: #C2DAB6;
    margin:0 auto;
}
div.text span.title {
    display:inline;
}
div.text:hover span.title {
    display:none;
   
}
div.text span.info {
    display:none;
     opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div.text:hover span.info {
    display:inline;
      visibility:visible;
  opacity:1;
}
table {
    border-collapse:collapse;
    text-decoration: none;
}
.image img {
    width: 60%;
    height: auto;
    padding-top: 10px;
}
.text{
    position: absolute;
background: #fff;
    z-index: 9999;
}
.image{
    position:relative;
top:20px;
}