731zachery217pergola915
New Member
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.HTML\[code\]<body><div id="page-container"> <div class="box-container"> <div class="image-container"> <a href="http://stackoverflow.com/questions/11548856/#"><img src="http://stackoverflow.com/questions/11548856/.jpg" height="100" width="200"/></a> </div> <div class="second-image-container"> <a href="http://stackoverflow.com/questions/11548856/#"><img src="http://stackoverflow.com/questions/11548856/.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>\[/code\]CSS\[code\]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}\[/code\]