Skip to content

Instantly share code, notes, and snippets.

@ihorduchenko

ihorduchenko/Slide Up

Created July 31, 2017 11:33
Show Gist options
  • Save ihorduchenko/487ca25c9380a9334125f161b04ca1ef to your computer and use it in GitHub Desktop.
Save ihorduchenko/487ca25c9380a9334125f161b04ca1ef to your computer and use it in GitHub Desktop.
Download ZIP
SlideUp block from above parent
Raw
Slide Up
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.newresponse .services-board-wrapper {
margin-left: -30px;
margin-right: -30px
}
.newresponse .services-board {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.newresponse .service-block-wrapper {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
margin-bottom: 60px
}
.newresponse .service-block {
padding-left: 30px;
padding-right: 30px
}
.newresponse .service-block-inner {
height: 325px;
position: relative
}
.newresponse .service-block-inner .service-block-mask {
background: rgba(43, 51, 76, 0.95);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 275px;
padding-top: 50px;
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
align-items: center
}
.newresponse .service-block-inner .thumbnail-wrapper {
height: 120px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center
}
.newresponse .service-block-inner img {
width: auto;
height: 70px
}
.newresponse .service-block-inner h3 {
text-align: center;
color: #ffffff;
font: normal 21px/28px "roboto_slabregular", Arial, sans-serif
}
.newresponse .service-block-inner .learn-more-bottom {
position: absolute;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
padding-left: 25px;
padding-right: 15px;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #c8d219
}
.newresponse .service-block-inner .learn-more-bottom span {
font: normal 18px/1 "montserratbold", Arial, sans-serif;
color: #000000;
text-decoration: underline solid #000
}
.newresponse .service-block-inner .learn-more-bottom span:hover {
text-decoration: none
}
.newresponse .service-block-inner .learn-more {
position: absolute;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
top: 0;
left: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
width: 100%;
height: 100%;
background: #c8d219;
transition: all 0.5s ease
}
.newresponse .service-block-inner .learn-more .learn-more_top {
border-bottom: 1px solid #000000;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center
}
.newresponse .service-block-inner .learn-more .learn-more_top span {
font: normal 18px/1 "montserratbold", Arial, sans-serif;
color: #000000;
text-decoration: underline solid #000
}
.newresponse .service-block-inner .learn-more .learn-more_top span:hover {
text-decoration: none
}
.newresponse .service-block-inner .learn-more.active {
-ms-transform: translateY(0);
transform: translateY(0);
transition: all 0.5s ease
}
</style>
</head>
<body>
<div class="newresponse">
<div class="service-block-wrapper">
<div class="service-block">
<div href="#" class="service-block-inner"
style="background: url() no-repeat center; background-size: cover;">
<div class="service-block-mask">
<div class="thumbnail-wrapper">
<img src="" alt="">
</div>
<div class="title-wrapper">
<h3>php the_title()</h3>
</div>
<div class="learn-more-bottom">
<span>Learn more</span>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="learn-more">
<div class="learn-more_top" title="Double click to close">
<span>Learn more</span>
<i class="fa fa-minus" aria-hidden="true"></i>
</div>
<div class="learn-more_descr">
<p>At Walden, we are the best equipped team to tackle the most challenging environmental
dilemmas.</p>
</div>
<div class="learn-more_arrow">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="service-block-wrapper">
<div class="service-block">
<div href="#" class="service-block-inner"
style="background: url() no-repeat center; background-size: cover;">
<div class="service-block-mask">
<div class="thumbnail-wrapper">
<img src="" alt="">
</div>
<div class="title-wrapper">
<h3>php the_title()</h3>
</div>
<div class="learn-more-bottom">
<span>Learn more</span>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="learn-more">
<div class="learn-more_top" title="Double click to close">
<span>Learn more</span>
<i class="fa fa-minus" aria-hidden="true"></i>
</div>
<div class="learn-more_descr">
<p>At Walden, we are the best equipped team to tackle the most challenging environmental
dilemmas.</p>
</div>
<div class="learn-more_arrow">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
function learnMore() {
var trigger = $(".learn-more-bottom"),
close = $(".learn-more_top");
trigger.click(function () {
$(this).next().addClass("active");
});
close.dblclick(function () {
$(this).parent().removeClass("active");
});
}
$(document).ready(function () {
learnMore();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment