Converting css with nested classes to styled components problem

Question

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..

CSS:

#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;
}

HTML:

<div id="cf">
  <img class="bottom" src="/images/Cirques.jpg" />
  <img class="top" src="/images/Clown%20Fish.jpg" />
</div>

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...

If u got time to explain it a bit, would be great :)

Answer 1

it becomes:

import Styled from 'styled-components';

const MyDiv = Styled.div`
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;

  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;

    &.top:hover{
       opacity:0;
    }
  }
`

 Render

<MyDiv />

Working example

https://codesandbox.io/s/xj3y2qz87q