title: Overriding previously set CSS
body: <p>My css:</p>
  
  <pre><code>.pic img:hover {
    border: 1px black solid;
  }
  </code></pre>
  
  <p>My html:</p>
  
  <pre><code>&lt;div class="pic"&gt;
    &lt;img src="hey.jpg"&gt;
    &lt;img class="overlay" src="overlay.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have an "overlay.jpg" that is placed in the bottom corner of the first image.
  Problem with the css is that the overlay gets the :hover effect too.</p>
  
  <p>The actual code is very complicated, I know the best solution would be to add a class to the first image and hover only that, but that will take more time than what i currently have to get this fixed.</p>
  
  <p>The code has a class for the overlay images though, so I'm asking if theres a way to override the hover by setting some other css for the overlay class.</p>
  
  <p>However <code>.overlay:hover { border: none; }</code> does not do the trick, even if i put it after the css above.</p>