nakome
2/4/2014 - 7:55 PM
A Pen by Moncho Varela.
A Pen by Moncho Varela.
/* photos
----------------------*/
.train{background-image:url("http://24.media.tumblr.com/a32f8942747624d6e568e84b2d6cd0a1/tumblr_mzzqzbLVlr1st5lhmo1_1280.jpg");}
.car{background-image:url("http://31.media.tumblr.com/a4c5fc63b6278b39233d79129b3dd59f/tumblr_mzzr7n7idZ1st5lhmo1_1280.jpg");}
.forest{background-image:url("http://25.media.tumblr.com/a4682aa2b41509e627e0a393d4eb9231/tumblr_mzzr0wGcaC1st5lhmo1_1280.jpg");}
.hause{background-image:url("http://25.media.tumblr.com/09d144943802daad98c4556e0961eb66/tumblr_mzzqxabKjH1st5lhmo1_1280.jpg");}
.clouds{background-image:url("http://31.media.tumblr.com/67d222ee577fc35faca83f0e08efc48e/tumblr_mzzqt7wyEU1st5lhmo1_1280.jpg");}
/* = style
--------------------*/
.box{
position:relative;
margin:5% auto;
width:290px;
height:290px;
padding:10px;
display:inline-block;
overflow:hidden;
z-index:3;
-webkit-box-shadow: 0 0 0 400px #FFF inset;
-moz-box-shadow: 0 0 0 400px #FFF inset;
box-shadow: 0 0 0 400px #FFF inset;
border: 1px solid #555;
-moz-background-size:cover;
background-size:cover;
background-position: center center;
color:#555;
}
.select .box{
-webkit-box-shadow:
0 0 0 10px #F55 inset,
0 20px 40px 7px #610808 inset;
-moz-box-shadow:
0 0 0 10px #F55 inset,
0 20px 40px 7px #610808 inset;
box-shadow:
0 0 0 10px #F55 inset,
0 20px 40px 7px #610808 inset;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
color: #FFF;
text-shadow: 0 2px 2px #000;
}
.box,
.box:hover,
.box-inner,
.box-inner h1,
.box-inner p,
.box-inner:hover{
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
.box-inner h1{
position:absolute;
top:20%;
left:4%;
text-align:center;
width:290px;
}
.box-inner p{
position:absolute;
bottom:30%;
left:4%;
text-align:center;
width:285px;
}
.select .tb:hover .box-inner h1{
top:-400px;
}
.select .tb:hover .box-inner p{
bottom:-400px;
}
.select .lr:hover .box-inner h1{
left:-400px;
}
.select .lr:hover .box-inner p{
left:700px;
}
.select .lt:hover .box-inner h1,
.select .lt:hover .box-inner p{
left:-400px;
}
.select .rt:hover .box-inner h1,
.select .rt:hover .box-inner p{
left:700px;
}
.select .tp:hover .box-inner h1,
.select .tp:hover .box-inner p{
top:700px;
}
button, .button {
cursor: pointer;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: normal;
margin: 0 0 1.25rem;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 1.0625rem;
padding-left: 2rem;
font-size: 1rem;
background-color: #FFF;
border: 1px solid #000;
color: #0C0C0C;
-webkit-transition: background-color 300ms ease-out;
-moz-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
padding-top: 1.0625rem;
padding-bottom: 1rem;
-webkit-appearance: none;
font-weight: normal !important;
}
button:hover,
button:focus,
.button:hover,
.button:focus {
background-color: #f55;
color: white;
border-color:#f00;
text-decoration: none;
}
/* portafolio */
#filter{
list-style:none;
margin:0;
}
#filter li{
display:inline-block;
list-style:none;
margin-left: 0.25em;
}
#portfolio{
list-style:none;
margin:0 auto;
}
#portfolio li{
position:relative;
float:left;
list-style:none;
z-index:10;
margin-left: 5px;
}
$(document).ready(function(){
// Portfolio
$('ul#filter a').click(function(){
// Remove class
$('ul#filter .current').removeClass('current');
// Add parent class
$(this).parent().addClass('current');
// find same class of menu
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
// If click all execute this
$('#portfolio li').addClass('select');
}else{
// Each all and filter values
$('#portfolio li').each(function() {
// Hide
if(!$(this).hasClass(filterVal)) {
$(this).removeClass('select');
// Show
}else{
$(this).addClass('select');
}
});
}
return false;
});
});
<ul id="filter">
<li class="current">
<a href="#" class="button">All</a></li>
<li><a href="#" class="button">Cards</a></li>
<li><a href="#" class="button">Mockups</a></li>
<li><a href="#" class="button">Design</a></li>
</ul>
<ul id="portfolio">
<li class="cards portfolio-item">
<div class="box tb train">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="mockups portfolio-item">
<div class="box lt forest">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="design portfolio-item">
<div class="box rt car">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="cards portfolio-item">
<div class="box lr clouds">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="mockups portfolio-item">
<div class="box tb car">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="design portfolio-item">
<div class="box tb clouds">
<div class="box-inner">
<h1>Title exmple</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="cards portfolio-item">
<div class="box lt train">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<li class="mockups portfolio-item">
<div class="box rt hause">
<div class="box-inner">
<h1>Title Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum est officiis quis eius ducimus quas</p>
</div>
</div>
</li>
<ul>