Hoverover subject title, swap with subject text

http://stackoverflow.com/questions/27614481/how-to-make-hoverover-table-not-effect-other-divs/27614562?noredirect=1#comment43651245_27614562 FUNCTIONAL DEFAULT: HTML <div class="page"> <div class="text"> <span class="title">Formwork</span> <span class="info"> Formwork is a new stackable desktop storage system designed by Sam Hecht and Kim Colin for Herman Miller.<p> Sold internationally, the packaging needed to communicate the breadth and versatility of the range without text. Using pared-back props, softly-focused environments and decisive colour the carefully art-directed photography emphasises Formwork’s precision as well as its considered and playful functionality.</p> </span> </div> <div class="image"> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-SmallTray-WEB.jpg" alt="" /> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-LargeBox-WEB.jpg" alt="" /> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Formwork1_RGB-WEB.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; margin:0 auto; height:100%; } div.text { width:80%; max-width:960px; margin:0 auto; } div.text span.title { display:inline; } div.text:hover span.title { display:none; } div.text span.info { display:none; } div.text:hover span.info { display:inline; } .image img { width: 100%; height: auto; padding-top: 10px; } .text{ position: absolute; z-index: 9999; } .image{ position:relative; top:20px; }

by Ken Watanabe

HTML

<div class="page">
    <div class="text">
        <span class="title">Formwork</span>
        <span class="info">
            Formwork is a new stackable desktop storage system designed by Sam Hecht and Kim Colin for Herman Miller.<p>
            Sold internationally, the packaging needed to communicate the breadth and versatility of the range without text. Using pared-back props, softly-focused environments and decisive colour the carefully art-directed photography emphasises Formwork’s precision as well as its considered and playful functionality.</p>
        </span>
    </div>
    <div class="image">
        <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-SmallTray-WEB.jpg" alt="" />
        <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-LargeBox-WEB.jpg" alt="" />
        <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Formwork1_RGB-WEB.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;
    margin:0 auto;
    height:100%;
}
div.text {
    width:80%;
    max-width:960px;
    margin:0 auto;
}
div.text span.title {
    display:inline;
}
div.text:hover span.title {
    display:none;
}
div.text span.info {
    display:none;
}
div.text:hover span.info {
    display:inline;
}
.image img {
    width: 100%;
    height: auto;
    padding-top: 10px;
}
.text{
    position: absolute;
    z-index: 9999;
}
.image{
    position:relative;
    top:20px;
}