model gallerie

index.html

<div class="container">
  <ul>
    <li class="model aida">
      <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
       <span class="label">
        <p>aida</p>
      </span>
    </li>
    <li class="model florencia">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>florencia </p>
      </span>
    </li>
   <li class="model agustin">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>agustin </p>
      </span>
    </li>
   <li class="model pablo clear">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>pablo </p>
      </span>
    </li>
    <li class="model agustina">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>agustina</p>
      </span>
    </li>
  </ul>
  <ul>
    <li class="model agustina">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>agustina</p>
      </span>
    </li>
    
    <li class="model florencia">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>florencia </p>
      </span>
    </li>
    <li class="model aida">
      <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
       <span class="label">
        <p>aida</p>
      </span>
    </li>

  <li class="model pablo clear">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>pablo </p>
      </span>
    </li>
   <li class="model agustin">
     <div class="icon">
       <i class="fa fa-plus-circle"></i>
      </div>
      <span class="label">
        <p>agustin </p>
      </span>
    </li>
 
  </ul>
 
</div>

model gallerie.markdown

model gallerie ('-' * 14)

A Pen by Juan Obrach on CodePen.

License.

script.js

$('.model').hover(function(){
  $(this).addClass("active")
  $(this).mouseleave(function(){
    $(this).removeClass("active")
  })
})




 

style.css

.html,body{
  width:100%;
  height:100%;
  margin:0;
  font-family: 'Open Sans Condensed', sans-serif;
  padding:20px;
  box-sizing:border-box
}

.container{
  width:100%;
  height:100%;
  display:flex;
  flex-flow:column nowrap;

}
.container ul{
  width:100%;
  height:300px;
  list-style:none;
  display:flex;
  flex-flow:row wrap;
  justify-content: stretch;         overflow: hidden;
}

.model{
  flex:1;
  height:100%;
  max-height: 100%;
  position:relative;
  cursor:pointer;
  transition:all .1s;
  trsansform:translateZ(200px);
  z-index:0;

}
.model:hover{
 transform:perspective(100px)translateZ(5px);
 transition:all .1s;
 z-index:200
}
.label{
  position:absolute;
  height:50px;
  width:100%;
  background:rgba(0,0,0,0.5);
  bottom:0;

}
.label p{
  text-transform:uppercase;
  color:white;
  font-size:2em;
  height: 50%;
  line-height:50px;
  letter-spacing:1px;
  margin-left:4px;
 
}

.icon{
  display:none
}
.fa{
  position:absolute;
  color:white;
  right:15px;top:15px;
  font-size:1.2em;
  display:inline-block;
  right:0

}

/*MODEL PHOTOS*/
.model.agustina{
    background:url(https://dl.dropboxusercontent.com/content_link/f0OdzXd7dpJuIykZrFrpKdDffhuNL7nsVdkad3SIYxhtOaBiZkC1zS9fLO0hiEYP);
background-position:50% 50%;
background-size:cover

}
.aida{
      background:url(http://www.promod.org/wp-content/uploads/2014/08/Agnieszka017-600x750.jpg);
    background-position:25% 20%;
      background-size:cover

}
.florencia{
      background:url("https://dl.dropboxusercontent.com/content_link/F9LqFAEs7tfKEtTZZZojxuno22EPHHGnRfZDR12bRdq2bpwGfzPQsdxq7pQV66ZB");
    background-position:50% 50%;
      background-size:cover
}
.agustin{
      background:url("https://dl.dropboxusercontent.com/content_link/2XypjNnp7yrzwvKKiwZmtbxbBPWUiIrn5GpzOXPwjRlMUzNL2dlz7ZqPcgahUpzH");
    background-position:50% 50%;
      background-size:cover
}
.pablo{
  background:url("https://dl.dropboxusercontent.com/content_link/DuG3KG9iCtNKJ5zTEBH1gcoYw7e35LQ7BTOJG8Pnmy5B9ZNmlvqfV0X0zEKXQ9Js");
background-position:50% 50%;
background-size:cover
}



@media only screen and (max-width: 600px){ 
  *{
     transition:all 1s;
  }
  .container ul{
     flex-flow:column wrap;
     transition:all 1s;
      height:1200px;
      }
  .model{
    margin-bottom:1em;
  }
  .model:hover{
   transform:perspective(100px)translateZ(0px);
   transition:all .1s;
   z-index:200
  }

  .model.agustina,
  .aida,
  .florencia,
  .agustin,
  .pablo{
    background-position:0% 10%;
  }
  .label{
    opacity:0.2
  }
}