title: Change image and text on hover and click
body: <p>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.</p>
  
  <p>I can manage to get the image and the text to swap separately but not both.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;body&gt;
  &lt;div id="page-container"&gt;
      &lt;div class="box-container"&gt;
          &lt;div class="image-container"&gt;
              &lt;a href="#"&gt;&lt;img src=".jpg" height="100" width="200"/&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="second-image-container"&gt;
              &lt;a href="#"&gt;&lt;img src=".jpg" height="100" width="200"/&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="text"&gt;
              &lt;div id="text-box"&gt;
                  &lt;p&gt;This is some text&lt;/p&gt;
  
                  &lt;p id="more-text"&gt;This is some more text&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="text-two"&gt;
              &lt;div id="text-box-two"&gt;
                  &lt;p&gt;This is some text&lt;/p&gt;
  
                  &lt;p id="even-more-text"&gt;This is some more text&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre class="lang-css prettyprint-override"><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></pre>