title: Highlight bootstrap row on hover
body: <p>Here I have used bootstrap row to show my content. 
  Originally it's height is less, on mouse hover I want to highlight by increase height and highlighting <code>watmore ...</code> attractively.</p>
  
  <p>Is there any bootstrap class for this?</p>
  
  <p><a href="http://jsfiddle.net/karimkhan/s5q9w/" rel="nofollow noreferrer">Example on Fiddle</a></p>
  
  <pre><code>&lt;div class="c1"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;div class="item"&gt;
          &lt;img class="media-object" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzqEv5GXTFGZ1jOzAMNldPJAB6qCU2LRaiiWsld9o7zN1gz_jKaQ" height="50" width="125"&gt;
          &lt;div class="descriptionContainer"&gt;
            &lt;h6&gt;Title of page&lt;/h6&gt;
          &lt;/div&gt;
          &lt;a class="pillBtn" style="background: '.$color.' !important;" href="#"&gt;50 &lt;/a&gt;
          &lt;a class="moreBtn" href="'.$url.'" target="_blank"&gt;&amp;nbsp wat more?...
            &lt;img class="smileyImg" src="http://www.mlvwrites.com/wp-content/uploads/2010/10/smiley-face.png" height="20" width="25"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>