<div id="home_gallery">
<ul id="drag_div" class="active">
<li class="active">
<div class="image"></div>
<a href="http://www.wikiwand.com/en/Ocean" target="_blank" class="no_hovercard">
<span class="ng-binding">
Ocean
<svg version="1.1" width="30px" height="15px">
<line fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" x1="3" y1="7.5" x2="26" y2="7.5"></line>
<g class="late_line">
<line fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" x1="26.487" y1="7.402" x2="20.207" y2="1.797"></line>
<line fill="none" stroke="#000000" stroke-linecap="round" stroke-miterlimit="10" x1="26.488" y1="7.402" x2="20.208" y2="13.254"></line>
</g>
</svg>
</span>
<i>Read this article on Wikiwand</i>
</a>
</li>
</ul>
</div>
//colors
$white: #fff;
$color_bon_jour_approx: #e1e1e1;
$black: #000;
//fonts
$font: Tahoma, serif;
%extend_1 {
display: block;
position: relative;
opacity: 0;
transform: translateY(20px);
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
outline: 0;
color: #1559b5;
position: relative;
transition: color .15s ease-out;
}
#home_gallery {
position: relative;
overflow: hidden;
width: 100%;
background-color: $white;
height: 600px;
ul {
position: relative;
opacity: 0;
transition: all .7s cubic-bezier(0.6, .1, .3, .8);
transform: translateY(50px);
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
&.active {
transform: translateY(0);
opacity: 1;
}
li {
width: 300px;
height: 50%;
position: relative;
overflow: hidden;
user-select: none;
&.active {
animation: plainScale .7s cubic-bezier(0.6, .1, .3, .8);
}
.image {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/500px-Clouds_over_the_Atlantic_Ocean.jpg);
}
a {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-family: $font;
transform: translateY(100%);
transition: all .3s cubic-bezier(0.6,.1,.3,.8);
padding: 10px;
line-height: 1.4;
user-select: none;
&:before {
content: "";
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 150%;
outline: 1px solid transparent;
transition: all .3s cubic-bezier(0.6,.1,.3,.8);
background-color: $white;
}
&:hover:before {
transform: rotate(10deg)!important;
}
svg {
display: inline-block;
vertical-align: middle;
}
line {
transition: all .1s cubic-bezier(0.6,.1,.3,.8) .2s;
stroke-dashoffset: 30;
stroke-dasharray: 30;
}
.late_line line {
transition: all .2s cubic-bezier(0.6,.1,.3,.8);
}
i {
@extend %extend_1;
color: rgba(0,0,0,.5);
font-size: 14px;
transition: all .3s cubic-bezier(0.6,.1,.3,.8) .3s;
}
span {
@extend %extend_1;
color: $black;
font-size: 22px;
transition: all .3s cubic-bezier(0.6,.1,.3,.8) .2s;
}
}
&:hover a {
transform: translateY(0%);
&:before {
top: -10%;
transform: rotate(7deg);
}
line {
transition: all .3s cubic-bezier(0.6,.1,.3,.8) .3s;
stroke-dashoffset: 0;
}
.late_line line {
transition: all .3s cubic-bezier(0.6,.1,.3,.8) .5s;
}
i {
opacity: 1;
transform: translateY(0);
}
span {
opacity: 1;
transform: translateY(0);
}
}
}
li>div {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $color_bon_jour_approx;
background-size: cover;
background-position: 50% 20%;
background-repeat: no-repeat;
transition: all 2s ease-out;
}
}
li:hover>div {
transform: scale(1.1);
}
}
@-webkit-keyframes plainScale {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes plainScale {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes plainScale {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes plainScale {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes plainScale {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.