« Анимационные CSS блоки в стиле Flat »

<section>
<div id="icon-wrapper">
  <a href="http://ufive.ru/">
  <div class="icons">
  <div class="icon-slide-container">
  <img class="slide-icon" alt="Materials" height="100" src="http://ufive.ru/images/css_block/view-map.jpg">
  </div>
  </div>
  </a>
   
  <a href="http://ufive.ru/load/0-0-0-0-1">
  <div class="icons2">
  <div class="icon-slide-container">
  <img class="slide-icon" alt="New Download" height="100" src="http://ufive.ru/images/css_block/add-beach.jpg">
  </div>
  </div>
  </a>
   
  <a href="http://ufive.ru/load/psd/3">
  <div class="icons3">
  <div class="icon-slide-container">
  <img class="slide-icon" alt="Photo" height="100" src="http://ufive.ru/images/css_block/view-all.jpg">
  </div>
  </div>
  </a>
   
  <a href="http://ufive.ru/forum/">
  <div class="icons4">
  <div class="icon-slide-container">
  <img class="slide-icon" alt="Forum" height="100" src="http://ufive.ru/images/css_block/feedback.jpg">
  </div>
  </div>
  </a>
  </div>
</section>

body{
  background: #fddcb6;
}

section{
  float: left;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  padding-left:0;
  padding-right:0;
}

#icon-wrapper{
  width:100%;
  float:left;
  height:300px;
}

.icons {
  width:25%;
  float:left;
  position:relative;
}
.icons2 {
  width:25%;
  float:left;
  position:relative;
  margin-left:25%;
}
.icons3 {
  width:25%;
  float:left;
  position:relative;
  margin-left:50%;
}
.icons4 {
  width:25%;
  float:left;
  position:relative;
  margin-left:75%;
}

.icon-slide-container{
  height:300px;
  overflow:hidden;
  text-align: left;
  position: absolute;
  float: left;
  width: 300px;
  left: 50%;
  margin-left: -150px;
}

.slide-icon{
  width:300px;
  height:auto;
  position:absolute;
  margin-top:-300px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}
   
.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

@media only screen and (max-width: 1300px) {
  #icon-wrapper{
  width:100%;
  float:left;
  height:170px;
  }
  .icon-slide-container {
  height: 200px;
  overflow: hidden;
  text-align: left;
  position: absolute;
  float: left;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  }
  .slide-icon {
  width: 200px;
  height: auto;
  position: absolute;
  margin-top: -200px;
  }
}

@media only screen and (max-width: 1000px) {
  #home-social-container{
  margin-right: 0;
  margin-left: 0;
  width: 100%;
  padding: 0;
  float: left;
  left: 0;
  }
}

@media only screen and (max-width: 840px) {
  #icon-wrapper{
  width:100%;
  float:left;
  height:650px;
  }
   
  .icon-slide-container {
  height: 300px;
  overflow: hidden;
  text-align: left;
  position: absolute;
  float: left;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  }
   
  .slide-icon {
  width: 300px;
  height: auto;
  position: absolute;
  margin-top: -300px;
  }  
  .icons {
  width: 50%;
  float: left;
  position: relative;
  }
  .icons2 {
  width: 50%;
  float: left;
  position: relative;
  margin-left: 50%;
  }
  .icons3 {
  width: 50%;
  float: left;
  position: relative;
  margin-left: 0%;
  margin-top: 350px;
  }
  .icons4 {
  width: 50%;
  float: left;
  position: relative;
  margin-left: 50%;
  }
}
   
@media only screen and (max-width: 650px) {
  #icon-wrapper {
  height: 400px;
  }
  #section{
  width: 90%;
  padding-left:5%;
  padding-right:5%;
  }
  .slide-icon {
  width: 200px;
  height: auto;
  position: absolute;
  margin-top: -200px;
  }
  .icon-slide-container {
  height: 200px;
  width: 200px;
  left: 50%;
  margin-left: -100px;
  }
  .icons3 {
  width: 50%;
  position: relative;
  margin-left: 0%;
  margin-top: 230px;
  }
}
   
@media only screen and (max-width: 570px) {
  #icon-wrapper {
  height: 300px;
  }
  .slide-icon {
  width: 150px;
  height: auto;
  position: absolute;
  margin-top: -150px;
  }
  .icon-slide-container {
  height: 150px;
  width: 150px;
  left: 50%;
  margin-left: -75px;
  }
  .icons3 {
  width: 50%;
  float: left;
  margin-left: 0%;
  margin-top: 190px;
  }  
}