title: Converting css with nested classes to styled components problem
body: <p>I'm having problems understanding nesting in styled components, i have a code i need to implement in my project but i don't fully understand how to write the same stuff with styled-comp. due to nesting of classes..</p>
  
  <p>CSS:</p>
  
  <pre><code>#cf {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }
  
  #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  
  #cf img.top:hover {
    opacity:0;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="cf"&gt;
    &lt;img class="bottom" src="/images/Cirques.jpg" /&gt;
    &lt;img class="top" src="/images/Clown%20Fish.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been using styled-components for couple of weeks, so i understand the basics, i'm just having problems writing 2 nested objects like it's shown in css...</p>
  
  <p>If u got time to explain it a bit, would be great :)</p>