model gallerie ('-' * 14)
A Pen by Juan Obrach on CodePen.
<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 ('-' * 14)
A Pen by Juan Obrach on CodePen.
$('.model').hover(function(){ | |
$(this).addClass("active") | |
$(this).mouseleave(function(){ | |
$(this).removeClass("active") | |
}) | |
}) | |
.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 | |
} | |
} | |