title: On hover, hide one div, display another
body: <p>I have seen this question have been asked many times, but mine is a little complicated.
  I am using bootstrap on my website, and basically, I am trying to join two images one half is a customer image, other half is a business image. What actually I'd like is, when one hover overs the first half i.e the customer image, the second half i.e the business image should turn to the second half of the customer image and the vice versa when someone hovers over the business image. </p>
  
  <p>Here's my HTML code.</p>
  
  <pre><code>&lt;div class="pics"&gt;
    &lt;div class="1half"&gt;
      &lt;div class="col-sm-2" style="padding-right: 0;" id="b1"&gt;
       &lt;img src="image/b1.png" alt="" width="340px" style="float: right;"&gt;
      &lt;/div&gt;  
     &lt;div class="col-sm-2" style="padding-right: 0; display: none;" id="c1"&gt;
       &lt;img src="image/c1.png" alt="" width="340px" style="float: right;"&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
     &lt;div class="2half"&gt;
  
      &lt;div class="col-sm-2" class="flash" style="padding-left: 0;" id="c2"&gt;
       &lt;img src="image/c2.png" alt="" width="338px"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-sm-2" class="flash" style="padding-left: 0; display: none;" id="b2"&gt;
       &lt;img src="image/b2.png" alt="" width="338px"&gt;
      &lt;/div&gt;
   &lt;/div&gt;  
  </code></pre>
  
  <p><br>
  </p>
  
  <p>In the above code, what I want is when someone hovers over #b1: #c2 should go away, and #b2 should be visible. I tried implementing CSS changes but it doesn't work.</p>
  
  <p>I have added the link on JSfiddle here. <a href="http://jsfiddle.net/2R5bq/" rel="nofollow">http://jsfiddle.net/2R5bq/</a></p>
  
  <p>Basically on hover, both should be the same. </p>