src/styles/components/_components.portfolio.scss
#portfolio {
i.fa {
font-size: 20px;
padding: 5px;
color: $orange;
}
.isotope-item {
z-index: 2;
margin-right: -1px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.isotope-hidden.isotope-item {
z-index: 1;
}
.isotope {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
.isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
}
.portfolio-item {
margin-bottom: 30px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
&:hover {
margin-bottom: 30px;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.hover-bg {
overflow: hidden;
position: relative;
}
}
.hover-bg {
img {
max-height: 100% !important;
}
.hover-text {
position: absolute;
text-align: center;
margin: 0 auto;
color: #ffffff;
background: rgba(0, 0, 0, 0.66);
padding: 25% 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 0.5s;
> h4 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all 0.3s;
}
> i {
opacity: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: all 0.3s;
}
}
&:hover {
.hover-text {
> h4 {
opacity: 1;
-webkit-backface-visibility: hidden;
-webkit-transform: translateY(0);
transform: translateY(0);
}
> i {
opacity: 1;
-webkit-backface-visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
opacity: 1;
}
}
}
}