title: Slide background-color over img
body: <p>Here is the html markup</p>
  
  <pre><code>&lt;div class="imgBox"&gt;
  
    &lt;img //src="https://cdn.images.dailystar.co.uk/dynamic/122/photos/693000/900x738/1074693.jpg" alt="IMG"&gt;
  
    &lt;div class="rollOver"&gt;
      lol
    &lt;/div&gt;
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>why isn't the background-color moving from -300px to -200px when I hover over .imgBox?</p>
  
  <p>css code:</p>
  
  <pre><code>   body{
        margin: 0;
        padding: 0;
      }
  
      .imgBox{
       width: 500px;
       height: 500px;
       position: relative;
      }
  
      img{
       width: 100%;
       height: 100%;
  
      }
      .rollOver{
       position: absolute;
       left: 0px;
       top: 0px;
       background-color: rgba(3, 3, 3, 0.897);
       height: 100%;
       width: 100%;  
       transform: translateX(-300px);  
       transition:all .4s ease; 
  
      }
  </code></pre>
  
  <p>Why doesn't it work when I hover over .imgBox, what will then happen too the .rollover</p>
  
  <pre><code>    .rollOver .imgBox:hover{
       transform: translateX(-200px);
       }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/61fqnyne/" rel="nofollow noreferrer">https://jsfiddle.net/61fqnyne/</a></p>