<body>
    <h1>Animated Grid</h1>

    <section class="animated-grid">
      <div class="card">a</div>
      <div class="card">b</div>
      <div class="card">c</div>
      <div class="card">d</div>
      

    </section>
    
  </body>

@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');

body {
    background: rgb(19, 19, 19);
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #353535;
    font-size: 3rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 }
  
.card:hover {
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    transform: translateY(-3px) scale(1.1);
 }


.animated-grid {
  display: grid;
  gap: 1rem;
  height: 85vh;
  grid-template-areas: 
  'a  b  c  d'
  
  grid-template-rows: repeat(4, 25%);
  grid-template-columns: 240px auto auto 240px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.