<div class="wrapper">
        <div class="container nature">
            <div class="card">
              <h3>Header</h3>
              <P>Card content</P>
            </div>
            <div class="card">
               <h3>Header</h3>
              <P>Card content</P>
            </div>
            <div class="card">
               <h3>Header</h3>
              <P>Card content</P>
            </div>
            <div class="card">
               <h3>Header</h3>
              <P>Card content</P>
            </div>
        </div>
    </div>

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
body {
  background: white;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  font-family: 'Fira Sans', sans-serif;
}
.wrapper { 
  display: flex;
  justify-content: center;
}

.container {
  margin: 100px;
  display: inline-flex;
}
.card {
  display: flex;
  height: 280px;
  width: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  box-shadow: -1rem 0 3rem #000;
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.card::before {
  content: "";
  width: 80%;
  height: 50%;
  display: block;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(5px);
  position: absolute;
  z-index: -1;
  border-radius: 10px;
}
.card::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  border: 1px solid rgb(255 255 255 / 50%);
  border-radius: 10px;
  z-index: -1;
}
.card:not(:first-child) {
  margin-left: -50px;
}
.card:hover {
  transform: translateY(-20px);
  transition: 0.4s ease-out;
}

.card:hover ~ .card {
  position: relative;
  left: 50px;
  transition: 0.4s ease-out;
}
.nature .card:nth-of-type(1) {
  background: url('http://surl.li/cnfvo');
  background-size: cover;
  background-position: center;
}
.nature .card:nth-of-type(2) {
  background: url('http://surl.li/cnfxq');
  background-size: cover;
  background-position: center;
}
.nature .card:nth-of-type(3) {
  background: url('http://surl.li/cnfyk');
  background-size: cover;
  background-position: center;
}
.nature .card:nth-of-type(4) {
  background: url('http://surl.li/cnfvz');
  background-size: cover;
  background-position: center;
}