<div id="cards">
<a class="card">
<div class="header">
<div class="header-image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png/724px-Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png')">
</div>
</div>
<div class="card-content">
<div class="card-body-title">
<h2>Notes from a journal found at the end of the world Pt.1</h2>
</div>
<div class="card-body">
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind (read on ...) </p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
</div>
<div class="card-body-footer"></div>
</div>
</a>
<a class="card">
<div class="header">
<div class="header-image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png/724px-Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png')">
</div>
</div>
<div class="card-content">
<div class="card-body-title">
<h2>Notes from a journal found at the end of the world Pt.2</h2>
</div>
<div class="card-body">
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind (read on ...) </p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
</div>
<div class="card-body-footer"></div>
</div>
</a>
<a class="card">
<div class="header">
<div class="header-image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png/724px-Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png')">
</div>
</div>
<div class="card-content">
<div class="card-body-title">
<h2>Notes from a journal found at the end of the world</h2>
</div>
<div class="card-body">
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind (read on ...) </p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
</div>
<div class="card-body-footer"></div>
</div>
</a>
<a class="card">
<div class="header">
<div class="header-image" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png/724px-Page_31_illustration_to_Three_hundred_Aesop%27s_fables_%28Townshend%29.png')">
</div>
</div>
<div class="card-content">
<div class="card-body-title">
<h2>Notes from a journal found at the end of the world Pt.3</h2>
</div>
<div class="card-body">
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind (read on ...) </p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
<p>Par-tur was the at the forefront of ancient medical discoveries at the turn of the 4th century B.C.E.. But, rare weather events buried what may have been treatments for diseases that have long plauged mankind.</p>
</div>
<div class="card-body-footer"></div>
</div>
</a>
</div>$standard-transition: cubic-bezier(0.65, 0.05, 0.36, 1);
$black: #444444;
.faded {
transition: opacity 0.25s;
opacity: 0.25;
}
body {
color: $black;
margin: 0;
height: 100vh;
}
#cards {
width: 100%;
min-height: 100vh;
.card {
display: flex;
flex-direction: column;
cursor: pointer;
margin: 15px;
width: auto;
max-height: 50vh;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
border-radius: 15px;
overflow: hidden;
// transition: all 0.25s $standard-transition;
border-bottom-right-radius: 0;
padding-bottom: 25px;
transition: all .25s;
.header {
height: 50%;
margin-bottom: 15px;
transition: all 0.25s;
.header-image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 150px;
transition: all 0.25s $standard-transition;
}
}
&:first-of-type {
margin-top: 50px;
}
&.open {
margin: 0 0 0 0;
bottom: 0;
padding-bottom: 10px;
max-height: 90vh;
transition: all .25s;
.body-content {
width: auto;
.card-body-title {
width: 100%;
}
.card-body {
p {
}
}
}
}
.card-content {
margin-top: 0;
padding: 0 25px 0 25px;
height: 100%;
transition: margin-top 0.25s;
transition: all 0.25s;
.card-body-title {
h2 {
font-size: 24px;
font-weight: bold;
text-transform: capitalize;
margin-top: 0;
margin-bottom: 0;
transition: all 0.25s;
}
}
.card-body {
width: 100%;
transition: all 0.25s;
p {
font-size: 20px;
margin-top: 15px;
margin-bottom: 0;
}
}
}
}
}
@media (min-width: 768px) {
#cards {
position: absolute;
left: 50%;
width: 100%;
transform: translateX(-50%);
.card {
height: 300px;
width: 500px;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
.header {
.header-image {
}
}
.card-content {
height: 250px;
.card-body-title {
h2 {
}
}
.card-body {
p {
}
}
}
&:hover {
transform: scale(1.1);
transition: all 0.25s $standard-transition;
box-shadow: 0 0 150px rgba(0, 0, 0, 0.075);
margin-top: 50px;
margin-bottom: 50px;
.header {
.header-image {
transform: scale(1.05) translateY(-3%);
width: 100%;
height: 100%;
transition: all 0.25s $standard-transition;
}
}
}
&.open {
transition: all 0.25s $standard-transition;
width: 100%;
height: 100vh;
border-radius: 0;
margin-top: 50px;
margin-left: auto;
margin-right :auto;
.header {
height: 25%;
transition: all 0.25s;
.header-image {
height: 100%;
transition: all 0.25s;
}
}
.card-content {
margin-top: 25px;
transition: all 0.25s;
margin: 50px auto;
padding-left: 20%;
padding-right: 20%;
.card-body {
width: 425;
}
}
}
}
}
}
var cards = document.getElementsByClassName("card");
var toggleCards = function() {
if($(this).hasClass('open')){
$(this).removeClass('open');
$('.card').removeClass('faded');
} else {
$('.card').removeClass('open');
$(this).addClass('open');
$(this).removeClass('faded');
$('.card').not($(this)).addClass('faded');
}
$('body, html').animate({
scrollTop: $(this).offset().top
}, 500)
};
for (var i = 0 ; i < cards.length ; i++) {
var clickEvent = (function() {
if ('ontouchstart' in document.documentElement === true) {
return 'touchstart';
}
else {
return 'click';
}
})();
cards[i].addEventListener(clickEvent, toggleCards, false);
}
var clickEvent = (function() {
if ('ontouchstart' in document.documentElement === true) {
return 'touchstart';
}
else {
return 'click';
}
})();
External CSS
This Pen doesn't use any external CSS resources.