SERVICE

by olimann

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
   
<div class="row"> 
     <div class="large-12">
 <ul id="skill" class="small-block-grid-1 medium-block-grid-3 large-block-grid-3 text-center">   
  
  <li>
    <figure>
           <i class="fi fi-home"></i>         
      <figcaption>
           <h3>Webdesign</h3>
        <p class="subtitle">Augmenter la visibilité et l’efficacité de votre site internet</p>
        <p class="subtl-info">Sites internet, template personnalisé, bannière commerciale...</p>
      </figcaption>
    </figure>
  </li>
     
     <li>
    <figure>
           <i class="fi fi-home"></i>
          
      <figcaption>
          <h3>Webdesign</h3>
        <p class="subtitle">Augmenter la visibilité et l’efficacité de votre site internet</p>
        <p>Sites internet, template personnalisé, bannière commerciale...</p>
      </figcaption>
    </figure>
  </li>
     
     <li>
    <figure>
           <i class="fi fi-home"></i>
          
      <figcaption> 
         <h3>Webdesign</h3>
        <p class="subtitle">Augmenter la visibilité et l’efficacité de votre site internet</p>
        <p>Sites internet, template personnalisé, bannière commerciale...</p>
      </figcaption>
    </figure>
  </li>
      
</ul>
     
</div>
    </div>


  

<section class="skill text-center"> 

	
<div class="row">
        
        <div class="small-12 medium-4 large-4 columns skill-height">       
		    <a href="index.php?project-cat=logo">
                
                <div class="icon">
                    <i class="fi fi-home"></i>
                    <h2>Identité visuelle</h2>                
                </div>
                
                
                <div class="info">
           ...

CSS

@import url(https://fonts.googleapis.com/css?family=Vollkorn:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Lato:400,900,700);
body{
    margin: 0;
}

ul#skill p, ul#skill i, ul#skill h3 {
        -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .5s ease;
}

div.icon, div.info  {
    -webkit-transition: all .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -moz-transition: all .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -o-transition: all .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);
   transition: all .3s cubic-bezier(0.165, 0.840, 0.440, 1.000);

}


.row {
    max-width: 1180px;
}


/* PRESTATION ////////////////////////////////////////////////////////////////////////*/


/**/
ul#skill  {
    background-color: #000;
 
}

ul#skill li {
    padding-top: 33.33%;
    position: relative;
    border-right: 1px solid #e0e0e0;
}

ul#skill {
    overflow: hidden;
    margin: 4.375em auto;
    
}

ul#skill figure {
    width: 100%;
    margin: 0;
    padding: 20px;
}

ul#skill li figure {
    position: absolute;
    top: 50%;
    left: 0;
     transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
}

ul#skill h3{
    font-size: 1.5em;
	color: #808289;
	margin: 0;
	text-transform: none;
	line-height: 1.3em;
}

ul#skill i {
    border-radius: 50%;
    display: inline-block;
    height: 200px;
    width: 200px;
	color: #808289;
	font-size: 8em;
    line-height: 190px;
	border: 5px solid #808289;
    margin-bottom: 30px;
}

ul#skill p{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    color: #808289;
}

ul#skill p.subtitle{
    color: #fff;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.3em;
   
}

ul#skill li:hover i {
    margin-top: -100%;
    opacity: 0;
}

ul#skill li:hover p{
    max-height: 100px;
    opacity: 1;
    margin: 20px 0;
}

ul#skill...