Cards

they work fine here! :(

by cambraca

HTML

<article class=card>

<h1>Card title</h1>

<section>
  Card content, maybe some text that is large enough
  to show in multiple lines.
</section>

</article>

SCSS

body {
  background-color: darkgray;
}

.card {
  margin: 40px 10px;
  width: 200px;
  height: 100px;
  transition: all .5s;

  h1 {
    margin: -30px 0 0;
    padding: 0 10px;
    font-size: 16px;
    line-height: 30px;
    background: darkgreen;
    color: white;
    border-radius: 5px 5px 0 0;
    width: 70%;
  }
  
  section {
    height: 100%;
    font-size: 14px;
    background-color: lightgray;
    padding: 10px;
    border-radius: 0 5px 5px 5px;
    box-shadow: rgba(black, .3) 0 4px 15px;
    transition: all .5s;
  }
  
  &:hover {
    transform: scale(1.05);
    
    section {
      box-shadow: rgba(black, .3) 5px 13px 40px;
    }
  }
}