title: Onhover change effect in css
body: <p>I have created box with image, link, title and some values. I want to create effect on mouse over/hover. </p>
  
  <p>Here I added the class to do:</p>
  
  <p><a href="http://jsfiddle.net/karimkhan/s5q9w/13/" rel="nofollow">Fiddle example</a></p>
  
  <p>but it does not create effect. What's wrong.</p>
  
  <p>Is this wrong way to do this?</p>
  
  <pre><code>.c1:hover{
  
  .item .moreBtn{position: relative;font-size: 14px;margin-right: 10px;margin-top: 32px;}  
  
  .item .pillBtn{-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;background:#7CDD97;padding: 10.5px 40px 8.0px 40px;color: #FFF;font-weight: bold;font-size: 20px;text-decoration: none;}
  
      .item h6 {margin-top: 18px;}
  
      .item{background:#F3F3F3;height: 70px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}
  
  }
  </code></pre>