/home/blackyak/www/wordpress/wp-content/themes/travivu/assets/sass/template/_portfolio.scss
// Portfolio Block I
.portfolio-one{
&__single{
position: relative;
max-width: 680px;
margin: 0 auto 30px;
}
&__image{
position: relative;
text-align: center;
z-index: 1;
border-radius: 8px;
overflow: hidden;
}
&__link{
display: block;
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: $black;
transition: all 0.35s;
opacity: 0;
}
img{
transition: all 0.35s;
}
}
&__content{
padding: 30px;
transition: all 0.3s;
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.07);
border-radius: 0 10px 10px 10px;
position: relative;
z-index: 9;
margin-top: -40px;
margin-right: 30px;
background: $white;
@media(max-width: 1024px){
padding: 20px 15px;
}
}
&__category{
font-size: 16px;
line-height: 18px;
a{
color: $body-color;
&:hover{
color: $theme-color;
text-decoration: underline;
}
}
}
&__title{
display: block;
font-size: 20px;
margin: 5px 0 6px;
@media(max-width: 1024px){
font-size: 18px;
}
a{
&:hover{
text-decoration: underline;
}
}
}
&__arrow{
width: 50px;
height: 50px;
background: $theme-color;
color: $white;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -25px;
right: 20px;
z-index: 9;
font-size: 14px;
transition: all 0.5s;
border-radius: 50%;
}
&__single{
&:hover, &:active, &:focus{
.portfolio-one{
&__arrow{
background: $theme-color-2;
}
&__link{
&:after{
opacity: 0.5;
}
}
}
}
}
}
// Portfolio Filter
.portfolio-filter{
margin-bottom: 25px;
width: 100%;
ul.nav-tabs{
display: inline-block;
text-align: center;
border: none;
width: 100%;
> li{
padding: 5px 8px 0;
> a{
font-weight: 500;
color: $black;
@include transition(all 0.35s);
padding: 0;
font-size: 16px;
position: relative;
z-index: 11;
&:after{
content: '';
@include size(0, 2px);
background: $black;
position: absolute;
bottom: 0;
left: 0;
z-index: -1px;
transition: all 0.35s;
}
.count{
border-radius: 50%;
z-index: 1;
position: absolute;
top: -20px;
right: -17px;
font-size: 12px;
color: $body-color;
opacity: 0;
transition: all 0.35s;
}
&:hover, &.active{
color: $black;
&:after{
width: 100%;
}
.count{
top: -10px;
opacity: 1;
}
}
}
}
}
}
.gva-portfolio-items{
float: left;
width: 100%;
}