title: Image hover color overlay
body: <p>I'm making a website wherein there's an image and when hovered, it has a color overlay. But instead of that color overlaying, it becomes white, the background of the website.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="col-md-6 col-sm-12"&gt;
  &lt;img src="images/about-img-2.jpg" class="img-responsive overlay" alt="about img 2"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:</p>
  
  <pre><code>.overlay:hover {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.23);
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pbko4.png" rel="nofollow noreferrer">It goes from this</a></p>
  
  <p><a href="https://i.stack.imgur.com/cgrDQ.png" rel="nofollow noreferrer">To this when hovered</a></p>
  
  <p>I'm sorry, I can't embed images I'm not allowed.</p>