Change image and text on hover and click
===

I have one image and text that goes along with it to the side and i want to change both of these at the same time on hover or by clicking on the image.

I can manage to get the image and the text to swap separately but not both.


    <body>
    <div id="page-container">
    <div class="box-container">
    <div class="image-container">
    <a href="#"><img src=".jpg" height="100" width="200"/></a>
    </div>
    <div class="second-image-container">
    <a href="#"><img src=".jpg" height="100" width="200"/></a>
    </div>
    <div id="text">
    <div id="text-box">
    <p>This is some text</p>
    <p id="more-text">This is some more text</p>  
    </div>
    </div>
    <div id="text-two">
    <div id="text-box-two">
    <p>This is some text</p>
    <p id="even-more-text">This is some more text</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>


    div#text {position: absolute; background-color: black; width: 350px; height: 300px;    
    top: 10px; right: -65px;}
    div#text p{position:absolute;color: white;top: 100px; left: 125px;}
    div#text-box p{background-color:blue; width:}
    div#text-box p#more-text{background-color: red; top: 65px; left: 90px;}
	
    div.image-container{opacity:1; position:absolute; z-index:500}
    div.second-image-container{position:absolute;top:;opacity: 1; z-index: 119}
    
    div#text-two{position:absolute;background-color: black; width: 350px; height:     
    300px;right: -65px; top: 10px;}
    
    div#text-box-two p{position:absolute;background-color:blue;z-index: 10}
    div#text-box-two p#more-text{background-color: red;}

    and the CSS that makes each individual image and text to swap:
    div.image-container:hover, div#text:hover{opacity:0}
 