title: Apply "hover" box-shadow only to the container
body: <p>I want to create a <code>Card</code> component in React and CSS that already has a shadow, but on hover it gets shadow-er.</p>
  
  <p>I added <code>box-shadow</code> to the container css but it seems to be applied only to its children.
  Is there a way to shadow only the card-container and not its children?
  For example on hover the two <code>p</code> elements get their own shadow, which I don't want.</p>
  
  <p>this is the card structure in card render function</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div className={"card-container"}&gt;
    &lt;div className="card-title"&gt;{this.state.title}&lt;/div&gt;
    &lt;div className="card-children"&gt;{this.state.children}&lt;/div&gt;
    &lt;div className="card-body"&gt;
      &lt;p&gt; text line one &lt;/p&gt;
      &lt;p&gt; text line two &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the card css </p>
  
  <pre class="lang-css prettyprint-override"><code>.card-container {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Card look */
    transition: 0.3s;
    background-color: white;
    border-radius: 4px; /* Round corners */
    border-left: 5px solid #5f37ff; /* Blue left border */
  }
  
  .card-container:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/cardshadow-react-css-tlqyi" rel="nofollow noreferrer">More complete CodeSnippet</a></p>