<!-- symbol to keep it DRY -->
<svg width="0" height="0" style="display:block">
  <defs>
    <linearGradient id="icongradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0.1" stop-color="white" stop-opacity="0" />
      <stop offset="0.75" stop-color="white" stop-opacity="0.5" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="fade" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#icongradient)" />
    </mask>
    <symbol id="dodecahedron" mask="url(#fade)" viewBox="0 0 511 511">
      <path fill="currentColor" d="M199 116l-45-97L45 98c-2 1-3 4-4 6L1 256h109l89-140zM216 129l-87 137 107 137 156-68-9-166zM390 148l65-66L324 2c-2-2-4-2-7-2L174 10l45 98 171 40zM110 277H1l51 143 5 5 132 81 32-88-111-141zM241 424l-31 87 152-20 5-2 112-82-77-54-161 71zM510 221L469 99l-65 65 10 172 76 53 20-164v-4z"/>
    </symbol>
  </defs>
</svg>
<div class="container">
  <a href="#" class="card card--darker-blue">
    <svg class="card__icon">
      <use xlink:href="#dodecahedron"/>
    </svg>
    <div class="card__class">First Class</div>
    <div class="card__name">Volversicherung</div>
  </a>
  <a href="#" class="card card--blue">
    <svg class="card__icon">
      <use xlink:href="#dodecahedron"/>
    </svg>
    <div class="card__class">Business Class</div>
    <div class="card__name">Volversicherung</div>
  </a>
  <a href="#" class="card card--dark-blue">
    <svg class="card__icon">
      <use xlink:href="#dodecahedron"/>
    </svg>
    <div class="card__class">Premium Economy</div>
    <div class="card__name">Volversicherung</div>
  </a>
  <a href="#" class="card">
    <svg class="card__icon">
      <use xlink:href="#dodecahedron"/>
    </svg>
    <div class="card__class">Economy</div>
    <div class="card__name">Volversicherung</div>
  </a>
</div>

@import url('https://fonts.googleapis.com/css?family=Muli');

body {
  display: flex;
  height:100vh;
}

.container {
  margin: auto;
  display: flex;
  flex-direction: column-reverse;
}

.card {
  --color1:#A273DD;
  --color2:#705DD4;
  --color3:#6052B8;
  position: relative;
  font-family:'Muli',sans-serif;
  font-weight: 700;
  font-size: 20px;
  display: block;
  overflow:hidden;
  background: linear-gradient(135deg,var(--color1),var(--color2) 100%);
  box-shadow: 2px 2px 0 2px var(--color3),20px 10px 50px rgba(0,0,0,0.25);
  width: 280px;
  height: 130px;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  padding: 17px;
  transform: rotate3d(1,-0.35,1,30deg);
  transition: transform 300ms;
  
  &::after {
    content:'';
    background: linear-gradient(to right,hsla(0,0,100%,0),hsla(0,0,100%,0.1) 40%,hsla(0,0,100%,0.1) 60%,hsla(0,0,100%,0) 100%);
    position: absolute;
    transform: translateX(-50px);
    top:-50%;
    bottom:-50%;
    left:0;
    width: 80%;
    opacity: 0;
    transition: transform 100ms 300ms, opacity 300ms;
    transform: translateX(-100%) rotate(-20deg);
  }
  &:not(:last-child) {
    margin-top: -40px;
  }
  
  &:hover {
    transform: translate(-20px,20px) rotate3d(1,-0.25,0.5,30deg);
    &::after{
      opacity:1;
      transform: translateX(150%) rotate(-20deg);
      transition: transform 1s 280ms;
    }
  }
}

.card--dark-blue {
  --color1:#556BCC;
  --color2:#3854D6;
  --color3:#324CBA;
}

.card--blue {
  --color1:#459AE7;
  --color2:#3269C7;
  --color3:#2C4993;
}

.card--darker-blue {
  --color1:#353F78;
  --color2:#2F305F;
  --color3:#24253F;
}

.card__icon {
  width: 52px;
  height: 52px;
  use {
    width: 100%;
    height: 100%;
    color: var(--color2);
  }
}

.card__class {
  padding: 1em 0 0.25em;
}

.card__name {
  font-size: 0.8em;
  color: hsla(0,0,100%,0.6);
}