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 <section class="page"> <article class="text"> <span class="title">Title &#40; More&#41;</span> <span class="info"> Title Information Goes here. <p>Information Text</p> <p>Information Text</p> </span> </article> <div class="image"> <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/> <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/> <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/> </div> </section> CSS section.page article.text { width:80%; max-width:960px; margin:0 auto; } section.page article.text span.title { display:inline; } section.page article.text:hover span.title { display:none; } section.page article.text span.info { display:none; } section.page article.text:hover span.info { display:inline; } /* Irrelevent Stuff */ .image img { width: 100%; height: auto; padding-top: 10px; } .text{ position: absolute; z-index: 9999; } .image{ position:relative; top:20px; } html, body { margin: 0; padding: 0; width:100%; height:100%; } body { font-family: helvetica; font-size: 18px; line-height: 26px; } section.page { width:80%; max-width:960px; margin:0 auto; height:100%; }

by Ken Watanabe

HTML

<section class="page">
    <article class="text">
        <span class="title">Hover over this</span>
        <span class="info">
            And It gets replaced with text.
        </span>
    </article>
    <div class="image">
        <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/>
        <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/>
        <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/>
    </div>
</section>

CSS

section.page article.text {
    width:80%;
    max-width:960px;
    margin:0 auto;
}
section.page article.text span.title {
    display:inline;
}
section.page article.text:hover span.title {
    display:none;
}
section.page article.text span.info {
    display:none;
}
section.page article.text:hover span.info {
    display:inline;
}



/* Irrelevent Stuff */

.image img {
    width: 100%;
    height: auto;
    padding-top: 10px;
}
.text{
    position: absolute;
    z-index: 9999;
}
.image{
    position:relative;
    top:20px;
}

html, body {
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}
body {
    font-family: helvetica;
    font-size: 18px;
    line-height: 26px;
}
section.page {
    width:80%;
    max-width:960px;
    margin:0 auto;
    height:100%;
}