title: How to correctly setup a CSS hover overlay image side by side
body: <p>I want to create a CSS hover images side by side, except when you scroll over one it shows text on top of the other. I partially got it to work except I am dealing with a z-index problem. If I roll over the left image, it shows the hover for the right image. I tried playing with the z-index but I couldn't get it to work. I created a code pen here</p>
  
  <p><a href="https://codepen.io/chrisgrim/pen/MZxVax?editors=1100" rel="nofollow noreferrer">https://codepen.io/chrisgrim/pen/MZxVax?editors=1100</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="overall-contain"&gt;
  &lt;div class="hover-box"&gt;
  &lt;div class="hover-box-content"&gt;
  &lt;div class="hover-box-content-overlay left1"&gt;&lt;/div&gt;
  &lt;p&gt;&lt;img class="hover-box-content-image" src="https://trulycreativedesign.com/wp-content/uploads/2019/01/rollover-test1-under.jpg" /&gt;&lt;/p&gt;
  
  &lt;div class="hover-box-content-details fadeIn-bottom left1"&gt;
  &lt;h3 class="hover-box-content-details"&gt;Text Over&lt;/h3&gt;
  &lt;h4 class="hover-box-content-details"&gt;Here&lt;h4&gt;
  &lt;h4 class="hover-box-content-details small"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/h4&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="hover-box"&gt;
  &lt;div class="hover-box-content"&gt;
  &lt;div class="hover-box-content-overlay right1"&gt;&lt;/div&gt;
  &lt;p&gt;&lt;img class="hover-box-content-image" src="https://trulycreativedesign.com//wp-content/uploads/2019/01/rollover-test-under.jpg" /&gt;&lt;/p&gt;
  
  &lt;div class="hover-box-content-details fadeIn-bottom right1"&gt;
  &lt;h3 class="hover-box-content-details"&gt;Second&lt;/h3&gt;
  &lt;h4 class="hover-box-content-details"&gt;Over&lt;h4&gt;
  &lt;h4 class="hover-box-content-details small"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/h4&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* rollover image */
  .overall-contain{
    display:flex;
  }
  
  .hover-box-content {
    position: relative;
    width: 100%;
    display:inline-flex;
  }
  
  .hover-box-content .hover-box-content-overlay {
    background: rgba(42,72,74,1);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 50;
    opacity: 0;
    z-index:10;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
  }
  
  .hover-box-content .hover-box-content-overlay.left1 {
      width:200%;
    background: url('https://trulycreativedesign.com/wp-content/uploads/2019/01/rollover-test1-over.jpg') center center no-repeat;
    background-size: cover;
  }
  
  .hover-box-content .hover-box-content-overlay.right1 {
      left:-100%;
    width:200%;
    background: url('https://trulycreativedesign.com/wp-content/uploads/2019/01/rollover-test-over.jpg') center center no-repeat;
    background-size: cover;
  }
  
  .hover-box-content:hover .hover-box-content-overlay{
    opacity: 1;
  }
  
  .hover-box-content-details {
    position: absolute;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    top: 50%;
    left: 50%;
    z-index:10;
    opacity: 0;
    text-align:left;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
  
  .hover-box-content-details.left1{
    margin-left:100%
  }
  
  .hover-box-content-details.right1{
    margin-left:-100%
  }
  
  .hover-box-content:hover .hover-box-content-details{
    top: 45%;
    left: 50%;
    opacity: 1;
  }
  </code></pre>
  
  <p>Thanks for any help!</p>