diamond grid

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<body>
        <div class="grid-container">
        <div class="bg-grid">
        </div>

        <div class="over-grid">
        <div class="grid">


              <div class="grid-item">
                <div class="diamond">
                  <div class="inner-diamond">
                    <img src="images/portfolio1.jpg" alt="" class="abstract" />
                    <div class="diamond-content">
                      <div class="diamond-logo"><img src="images/logos/logo1.png" alt="" /></div>
                      <div class="diamond-exerpt">Met veel plezier hebben wij met het team van BigBridge gewerkt aan onze nieuwe shop</div>
                      <a class="button" href="#">
                        <i>bekijk project</i>
                        <span>bekijk project </span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="grid-item huge second">
                <div class="diamond">
                  <div class="inner-diamond">
                    <img src="images/portfolio2.jpg" alt="" class="abstract" />
                    <div class="diamond-content">
                      <div class="diamond-logo"><img src="images/logos/logo2.png" alt="" /></div>
                      <div class="diamond-exerpt">Met veel plezier hebben wij met het team van BigBridge gewerkt aan onze nieuwe shop</div>
                      <a class="button" href="#">
                        <i>bekijk project</i>
                        <span>bekijk project </span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="grid-item">
                <div class="diamond">
                  <div class="inner-diamond">
                    <img...

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic);
@import url("icomoon.css");

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?cgucyu');
    src:    url('../fonts/icomoon.eot?cgucyu#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?cgucyu') format('truetype'),
        url('../fonts/icomoon.woff?cgucyu') format('woff'),
        url('../fonts/icomoon.svg?cgucyu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}



body {margin: 0; padding: 0;}

.grid-container {position: relative;}
.bg-grid {
  background: #f2f2f2;
  position: absolute;
  top: 258px;
  left: 0;
  right: 0;
  bottom: 100px;

}
.over-grid {width: 100%; overflow: hidden;}
.grid {margin: 120px -120px 200px 120px;}

.grid-item {
  width: 246px;
  height: 246px;
  margin-bottom: 147.6px;
  box-sizing: border-box;
  /*border: 1px solid #000;*/
 }

 .grid-item.huge {
   width: 492px;
   height: 492px;
   margin-bottom: 295.2px;
 }

 .grid-item .diamond {
   width: 278.3172291px;
   height: 278.3172291px;
   -webkit-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
           transform: rotate(-45deg);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    background: #171c26;
    border: 5px solid #f2f2f2;
    outline: 4px solid #f2f2f2;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;
    /*display: none;*/
 }
  /*.grid-item .diamond:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #f2f2f2;
  }*/
 .grid-item.huge .diamond {
  width: 556.6344582px;
  height: 556.6344582px;
 }
  .grid-item:not(.your-project) .diamond:hover {
    -webkit-backface-visibility: visible;
      ...