<div class='container'>
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">May the 4th Be With You</h1>


      <ul>
        <li class="col-md-3">
          <div class='front'></div>
          <div class='back'>
            <img src='https://cdn.dribbble.com/users/1604504/screenshots/6946793/media/cd784e64a1fa6378f5eb17ec742a5c3c.gif'>
          </div>
        </li>
        <li class="col-md-3">
          <div class='front'></div>
          <div class='back'>
            <img src='https://media.giphy.com/media/6QcwCXbbavxVC/giphy.gif'>
          </div>
        </li>
        <li class="col-md-3">
          <div class='front'></div>
          <div class='back'>
            <img src='https://cdn.dribbble.com/users/363484/screenshots/1501204/stormtrooperdrbl2.gif'>
          </div>
        </li>
        <li class="col-md-3">
          <div class='front'></div>
          <div class='back'>
            <img src='https://media.giphy.com/media/6QcwCXbbavxVC/giphy.gif'>
          </div>
        </li>
        <li class="col-md-3">
          <div class='front'></div>
          <div class='back'>
            <img src='https://cdn.dribbble.com/users/363484/screenshots/1501204/stormtrooperdrbl2.gif'>
          </div>
        </li>
        <li class="col-md-3">
          <div class='front'></div>
          <div class='back'>
            <img src='https://cdn.dribbble.com/users/1604504/screenshots/6946793/media/cd784e64a1fa6378f5eb17ec742a5c3c.gif'>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

  @import url('https://fonts.googleapis.com/css?family=Faster+One|Monoton');
  body {
    width: 100%;
    height: 100%;
    background: url("https://www.mysticsoftwares.com/images/mystic_bg_img1.gif");
  }

.container {
  max-width: 60%;
  float: none;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
  
  body:before {
    width: 100%;
    height: 100%;
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: -moz-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
    background-image: -ms-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
    background-image: -webkit-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
    background-image: -o-linear-gradient(top left, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
    background-image: linear-gradient(to bottom right, rgba(29, 38, 113, 0.60), rgba(195, 55, 100, 0.60));
    background-size: auto;
  }
  
  h1 {
    color: #fff;
    font-family: 'Monoton', cursive;
    font-size: 70px;
    text-shadow: 2px 2px 10px #1D2671, 4px 4px 15px #C33764, ;
  }
  
  ul {
    perspective: 600;
    margin: 0 auto;
  }
  
  li {
    width: 200px;
    height: 200px;
    float: left;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 50px;
    position: relative;
    cursor: pointer;
    counter-increment: item;
    div {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 5px;
      transition: all .5s;
      backface-visibility: hidden;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.30);
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 5px;
    }
    &:hover .front {
      z-index: 0;
      transform: rotateY(180deg);
    }
    &:hover .back {
      transform: rotateY(0);
    }
  }
  
  .front {
    z-index: 3;
    color: #333;
    text-align: center;
    line-height: 200px;
    font-size: 80px;
    font-family: 'Faster One', cursive;
    background: #C33764;
    background: -webkit-linear-gradient(45deg, #1D2671 10%, #C33764 80%);
    background: linear-gradient(45deg, #1D2671 10%, #C33764 80%);
    &:after {
      content: counter(item);
    }
  }
  
  .back {
    transform: rotateY(180deg);
  }