Blurbs 10
Blurbs 10
Project 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
Project 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
Project 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
Project 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
Project 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
Project 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
/* ===== Blurbs 10 ===== */
#blurbs-10 .col {
position: relative;
min-height: 400px;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#blurbs-10 .card {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
border: 0;
background: transparent;
}
#blurbs-10 .col:hover .card {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
z-index: 9
}
#blurbs-10 .col:before {
content: '';
-webkit-transform: skew(45deg) translateX(-100%);
-ms-transform: skew(45deg) translateX(-100%);
transform: skew(45deg) translateX(-100%);
top: 0;
left: -50%;
background: #fff;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
opacity: 0;
}
#blurbs-10 .col:after {
content: '';
-webkit-transform: skew(45deg) translate(100%);
-ms-transform: skew(45deg) translate(100%);
transform: skew(45deg) translate(100%);
top: 0;
right: -50%;
background: #fff;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
opacity: 0;
}
#blurbs-10 .col:hover:before {
-webkit-transform: skew(30deg) translatex(1%);
-ms-transform: skew(30deg) translatex(1%);
transform: skew(30deg) translatex(1%);
-webkit-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
opacity: 1;
}
#blurbs-10 .col:hover:after {
-webkit-transform: skew(30deg) translatex(-1%);
-ms-transform: skew(30deg) translatex(-1%);
transform: skew(30deg) translatex(-1%);
-webkit-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
opacity: 1;
}