|
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300); |
|
|
|
html { |
|
height: 100%; |
|
} |
|
|
|
body { |
|
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/grad-bg.png") no-repeat center center/cover #F9D8AD; |
|
height: 100%; |
|
} |
|
|
|
button:focus { |
|
outline: none; |
|
} |
|
|
|
button:hover { |
|
opacity: .8; |
|
} |
|
|
|
.fa { |
|
font-size: 20px; |
|
} |
|
|
|
.fa-info { |
|
color: white; |
|
} |
|
|
|
#container { |
|
width: 330px; |
|
height: 508px; |
|
max-width: 330px; |
|
background: white; |
|
position: relative; |
|
top: 50%; |
|
left: 50%; |
|
overflow: hidden; |
|
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25); |
|
transform: translate3d(-50%, -50%, 0); |
|
} |
|
|
|
h2 { |
|
padding: 20px; |
|
color: white; |
|
background: #3E4FB2; |
|
font-weight: 300; |
|
text-align: center; |
|
font-size: 18px; |
|
font-family: 'Roboto', sans-serif; |
|
} |
|
|
|
.detail { |
|
color: #777; |
|
padding: 20px; |
|
line-height: 1.5; |
|
font-family: 'Roboto', sans-serif; |
|
} |
|
|
|
.img-wrapper { |
|
padding: 0; |
|
position: relative; |
|
} |
|
|
|
.img-wrapper:after { |
|
content: ""; |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: rgba(62, 79, 178, .25); |
|
width: 100%; |
|
} |
|
|
|
.img-wrapper img { |
|
width: 100%; |
|
height: 200px; |
|
-o-object-fit: cover; |
|
object-fit: cover; |
|
margin: 0; |
|
display: block; |
|
position: relative; |
|
} |
|
|
|
.button-wrapper { |
|
width: 50px; |
|
height: 100%; |
|
position: absolute; |
|
bottom: 0; |
|
right: 0; |
|
display: -webkit-box; |
|
display: -webkit-flex; |
|
display: -ms-flexbox; |
|
display: flex; |
|
-webkit-box-align: center; |
|
-webkit-align-items: center; |
|
-ms-flex-align: center; |
|
align-items: center; |
|
-webkit-box-pack: center; |
|
-webkit-justify-content: center; |
|
-ms-flex-pack: center; |
|
justify-content: center; |
|
-webkit-transform-origin: 50% 50%; |
|
-ms-transform-origin: 50% 50%; |
|
transform-origin: 50% 50%; |
|
right: 20px; |
|
bottom: 20px; |
|
} |
|
|
|
button { |
|
width: 50px; |
|
height: 50px; |
|
border: none; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4); |
|
z-index: 9; |
|
position: relative; |
|
} |
|
|
|
.main-button { |
|
background: #ff2670; |
|
-webkit-align-self: flex-end; |
|
-ms-flex-item-align: end; |
|
align-self: flex-end; |
|
} |
|
|
|
.ripple { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
top: 0; |
|
border-radius: 50%; |
|
z-index: -9; |
|
background: transparent; |
|
border: 1px solid #ff2670; |
|
-webkit-transform: scale(.5); |
|
-ms-transform: scale(.5); |
|
transform: scale(.5); |
|
-webkit-transition: .3s all ease; |
|
transition: .3s all ease; |
|
opacity: 1; |
|
} |
|
|
|
.rippling { |
|
-webkit-animation: .3s rippling 1; |
|
animation: .3s rippling 1; |
|
-moz-animation: .3s rippling 1; |
|
} |
|
|
|
@-webkit-keyframes rippling { |
|
|
|
25% { |
|
-webkit-transform: scale(1.5); |
|
transform: scale(1.5); |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
-webkit-transform: scale(2); |
|
transform: scale(2); |
|
opacity: 0; |
|
} |
|
|
|
} |
|
|
|
@-moz-keyframes rippling { |
|
|
|
25% { |
|
-moz-transform: scale(1.5); |
|
transform: scale(1.5); |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
-moz-transform: scale(2); |
|
transform: scale(2); |
|
opacity: 0; |
|
} |
|
|
|
} |
|
|
|
@keyframes rippling { |
|
|
|
25% { |
|
transform: scale(1.5); |
|
opacity: 1; |
|
} |
|
|
|
100% { |
|
transform: scale(2); |
|
opacity: 0; |
|
} |
|
|
|
} |
|
|
|
.layer { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
width: 50px; |
|
height: 50px; |
|
background: #ff2670; |
|
border-radius: 50%; |
|
z-index: -99; |
|
pointer-events: none; |
|
} |
|
|
|
.button-wrapper.clicked { |
|
-webkit-transform: rotate(90deg) translateY(-96px); |
|
-ms-transform: rotate(90deg) translateY(-96px); |
|
transform: rotate(90deg) translateY(-96px); |
|
right: 0; |
|
bottom: 0; |
|
-webkit-transition: .3s all ease .6s; |
|
transition: .3s all ease .6s; |
|
} |
|
|
|
.button-wrapper.clicked .main-button { |
|
opacity: 0; |
|
-webkit-transition: .3s all ease .3s; |
|
transition: .3s all ease .3s; |
|
} |
|
|
|
.button-wrapper.clicked .layer { |
|
-webkit-transform: scale(100); |
|
-ms-transform: scale(100); |
|
transform: scale(100); |
|
-webkit-transition: 2.25s all ease .9s; |
|
transition: 2.25s all ease .9s; |
|
} |
|
|
|
.layered-content { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
display: -webkit-box; |
|
display: -webkit-flex; |
|
display: -ms-flexbox; |
|
display: flex; |
|
-webkit-box-align: center; |
|
-webkit-align-items: center; |
|
-ms-flex-align: center; |
|
align-items: center; |
|
-webkit-box-pack: center; |
|
-webkit-justify-content: center; |
|
-ms-flex-pack: center; |
|
justify-content: center; |
|
opacity: 0; |
|
} |
|
|
|
.layered-content.active { |
|
opacity: 1; |
|
} |
|
|
|
.close-button { |
|
background: white; |
|
position: absolute; |
|
right: 20px; |
|
top: 20px; |
|
color: #ff2670; |
|
} |
|
|
|
.layered-content.active .close-button { |
|
-webkit-animation: .5s bounceIn; |
|
animation: .5s bounceIn; |
|
} |
|
|
|
.layered-content .content img { |
|
width: 80px; |
|
-webkit-shape-outside: 80px; |
|
shape-outside: 80px; |
|
border-radius: 50%; |
|
display: block; |
|
margin: 0 auto 15px; |
|
padding: 10px; |
|
box-sizing: border-box; |
|
background: white; |
|
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4); |
|
-webkit-transition: .3s all ease; |
|
transition: .3s all ease; |
|
} |
|
|
|
.content p { |
|
color: white; |
|
font-weight: 300; |
|
text-align: center; |
|
line-height: 1.5; |
|
font-family: 'Roboto', sans-serif; |
|
} |
|
|
|
.content p a { |
|
font-size: 12px; |
|
background: white; |
|
padding: 2.5px 5px; |
|
color: #ff2670;; |
|
text-decoration: none; |
|
border-radius: 50px; |
|
display: inline-block; |
|
margin-left: 1.5px; |
|
} |
|
|
|
.content img, |
|
.content p { |
|
opacity: 0; |
|
position: relative; |
|
top: -7.5px; |
|
} |
|
|
|
.layered-content.active .content img { |
|
opacity: 1; |
|
top: 0; |
|
-webkit-transition: .5s all ease .5s; |
|
transition: .5s all ease .5s; |
|
} |
|
|
|
.layered-content.active .content p { |
|
opacity: 1; |
|
top: 0; |
|
-webkit-transition: .5s all ease 1s; |
|
transition: .5s all ease 1s; |
|
} |