title: Merging borders of 2 divs on hover over
body: <p>I have 2 div elements. First element is visible to the user, and when the user hovers over it, he is shown the remaining elements. On hovering over, I want to remove common borders of both these div elements.</p>
  
  <p>I tried adding this css to the top div element so as to remove its border on hover over and increase its z - index such that it covers the top part of below div. But it is not working. Need help in getting this done.</p>
  
  <p>Without hover:</p>
  
  <pre><code> __________________
  |                  |  
  |__________________|
  </code></pre>
  
  <p>With hover (currently with above mentioned CSS):</p>
  
  <pre><code> __________________
  |                  |  
  |__________________|__________________
  |                                    |
  |____________________________________|
  </code></pre>
  
  <p>Required on hover (this is what it should look like after removing common border):</p>
  
  <pre><code> __________________
  |                  |  
  |                  |__________________
  |                                     |
  |_____________________________________|
  </code></pre>
  
  <p>Fiddle Link: <a href="https://jsfiddle.net/fqw63Lzn/1/" rel="nofollow">https://jsfiddle.net/fqw63Lzn/1/</a></p>