title: Hover on div element does not do the effect individually
body: <p>I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?</p>
  
  <pre><code>&lt;style&gt;
      div.product{
          width:90%;
          margin:10px auto;
          height: 200px;
          transition: all 0.1s ease;
          background-color: #069;
      }
      div.product:hover{
          margin-top:-5px;
      }
      .img_box{
          width:50%;
          height:100%;
          padding: 10px;
          float:left;
          box-sizing: border-box;
      }
      .desc_box{
          width:50%;
          height:100%;
          float:left;
          padding: 10px;
          box-sizing: border-box;
      }
      .img{
          background-color: #b65050;
          height: 100%;
      }
  
      .desc{
          background-color:  chocolate;
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div class="product"&gt;
      &lt;div class="img_box"&gt;
          &lt;div class="img"&gt;
              image
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="desc_box"&gt;
          &lt;div class="desc"&gt;
              desc
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="product"&gt;
      &lt;div class="img_box"&gt;
          &lt;div class="img"&gt;
              image
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="desc_box"&gt;
          &lt;div class="desc"&gt;
              desc
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
   &lt;div class="product"&gt;
      &lt;div class="img_box"&gt;
          &lt;div class="img"&gt;
              image
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="desc_box"&gt;
          &lt;div class="desc"&gt;
              desc
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
   &lt;div class="product"&gt;
      &lt;div class="img_box"&gt;
          &lt;div class="img"&gt;
              image
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="desc_box"&gt;
          &lt;div class="desc"&gt;
              desc
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>heres my fiddle: <strong><a href="http://jsfiddle.net/rEmg4/" rel="nofollow noreferrer">MY FIDDLE</a></strong></p>