Pulse Gala 2015

by Susan Delgado

HTML

<h1>PULSE GALA 2015</h1>
<section id="links">
  <div class="area">
    <div class="container">
      <div class="row">
        <div class="wrap">

          <!-- <div class="col-md-3"> -->
          <div class="losange link1">
            <div class="los1">
              <a href="#l"><img src="https://collabdesigns.com/wp-content/themes/sdelgado-wp/src/img/diamond-gallery-2015.png"></a>
            </div>
          </div>
          <!--  </div> 

                    <div class="col-md-6"> -->
          <div class="losange link2">
            <div class="los1">
              <a href="#"><img src="https://collabdesigns.com/wp-content/themes/sdelgado-wp/src/img/diamond-attend.png"></a>
            </div>
          </div>
          <!-- </div>

                    <div class="col-md-3"> -->
          <div class="losange link3">
            <div class="los1">
              <a href="#t"><img src="https://collabdesigns.com/wp-content/themes/sdelgado-wp/src/img/diamond-donate.png"></a>
            </div>
          </div>
          <!-- </div>

                    <div class="col-md-12"> -->
          <div class="losange link4" id="honoree">
            <div class="los1">
              <a href="#"><img src="https://collabdesigns.com/wp-content/themes/sdelgado-wp/src/img/diamond-henry.png"></a>
            </div>
          </div>
          <!-- </div>  -->



        </div>
      </div>
    </div>
  </div>

</section>

CSS

h1 {
  margin-bottom: 150px;
  font-family: arial, serif;
}

#links {
  height: 620px;
  position: relative;
  background-color: #391753;
  background-image: url(https://collabdesigns.com/wp-content/themes/sdelgado-wp/src/img/pulse-2015-link.jpg);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  font-size: 16px;
  line-height: 30px;
  font-family: "Univers LT W02 45 Light";
}

#links .wrap {
  position: relative;
  width: 825px;
  margin: 0 auto;
  -moz-transition-property: width;
  -o-transition-property: width;
  -webkit-transition-property: width;
  transition-property: width;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

#links .losange {
  transform: rotate(45deg) translateY(10px);
}

#links .losange,
#links .losange div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 345px;
  height: 345px;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  -webkit-transition-duration: 2s;
  transition-duration: 2s;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  cursor: pointer;
}

#links .losange .los1 {
  width: 450px;
  height: 450px;
  transform: rotate(-45deg) translateY(-74px);
}

#links .losange,
#links .losange div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 345px;
  height: 345px;
  -moz-transition-property: all;
  -o-transition-property: all;
 ...