title: How to create a div with black background to fit right behind a div?
body: <p>I have an image, on hover i will animate it to fade out to opacity: 0.4;, the fading out is fading to white, but i liked to fade to black, so i found a solution is to change the background color of the body to black. Then my fadeout will be towards black. So the plan i'm trying to do is create a div with black background to have the same width and height as my img but i don't know how to do it.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="img_section "&gt;            
              &lt;img class="eight columns test_img" src="images/wpdevshed-portfolio.jpg" alt="logo"&gt;
              &lt;h2 class="caption"&gt;Jack&lt;br /&gt;Portfolio1&lt;/h2&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The width and height of my image is 500 by 500. So basically i want a black bg to be behind this image, so when i fadeout it will be towards black.. Anyone know of any simple ways that i can achieve it instead of using body{background-color:black};? </p>