<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<h3>Recent Messages</h3>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h3>Latest Teaching</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
<div class="row">
<h3>Sunday Sermons Series<small>
<a href="#">Show all</a>
</small></h3>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
<div class="row">
<h3>Teaching Series<small>
<a href="#">Show all</a>
</small></h3>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="show-button show-button btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="card" id="card1">
<div class="card-image">
<img class="img-responsive" src="https://www.crescent.church/media/5246/exodus.jpg">
</div><!-- card image -->
<div class="card-content">
<span class="card-title">Series Title</span>
<button type="button" class="btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-h"></i>
</button>
</div><!-- card content -->
<div class="card-action">
<a href="#" target="new_blank">Link</a>
</div><!-- card actions -->
<div class="card-reveal">
<span class="card-title">Series Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p>This series is the first of three which will eventually cover the whole book. This first section tells how God delivered His people from slavery, and brought them out of Egypt. The next two series will deal with God’s Law, and Worship.</p>
</div><!-- card reveal -->
</div>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image{
overflow: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
max-height: 180px
}
.card .card-image img{
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.card{
font-family: 'Roboto', sans-serif;
margin-top: 10px;
position: relative;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
height: 400px;
}
.card .card-content {
padding: 10px;
}
.card .card-content .card-title, .card-reveal .card-title{
font-size: 20px;
font-weight: 200;
}
.card .card-action{
border-top: 1px solid rgba(160, 160, 160, 0.2);
min-height: 52px;
vertical-align: baseline;
padding: 13px 10px;
width: 100%;
right: auto;
background-color: #ffffff;
position: absolute;
bottom: 0;
z-index: 3;
box-sizing: border-box;
box-shadow: 0 -20px 15px -5px #ffffff;
}
.card .card-action a{
font-size: 15px;
color: #ffab40;
margin-right: 20px;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.card .card-action a:hover{
color:#ffd8a6;
text-decoration:none;
}
.card .card-reveal{
padding: 15px;
position: absolute;
background-color: #FFF;
width: 100%;
overflow-y: auto;
/*top: 0;*/
left:0;
bottom:0;
height: 100%;
z-index: 1;
display: none;
}
.card .card-reveal p{
color: rgba(0, 0, 0, 0.71);
margin: 10px ;
}
.btn-custom{
background-color: transparent;
font-size:18px;
}
$(function(){
$('.show-button').on('click',function(){
$(this).parent().parent().find('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).parent().slideToggle('slow');
});
});
