Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bl.ocks Layout
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
figure {
margin: 0;
}
.row {
width: 960px;
display: flex;
flex-wrap:wrap;
justify-content:flex-end;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-25deg);
}
.column {
padding:20px;
width:50%;
max-width: 50%;
flex: 1 1 50%;
}
.row,
.column,
.ItemCard,
.ItemCard__dest,
.ItemCard__thumb {
position: relative;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.cover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ItemCard__thumb img {
position: relative;
z-index: 1;
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: translate3d(0, 0, 10px);
}
.shadow {
display: block;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
opacity: .9;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}
.column:hover .ItemCard__dest {
z-index: 10;
}
.column:hover .ItemCard__dest,
.column:hover .ItemCard__thumb img {
transform: translate3d(0, 0, 50px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform-origin: center bottom;
}
.column:hover .ItemCard__thumb .shadow {
opacity: .6;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/8cc5d8de353686e6a4c1aeb2a551913e" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/8cc5d8de353686e6a4c1aeb2a551913e/raw/2e664d8ad79a2883092b5bf4280c791930da8143/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/3d6b770b33ed18f622efcd9906d2c9a2" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/3d6b770b33ed18f622efcd9906d2c9a2/raw/c37bb2fcafac596b47de63710ac0ccbf098a77f8/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/73a7b7b3d586979a6ab732918623f4ac" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/73a7b7b3d586979a6ab732918623f4ac/raw/47807bd4a23264866d84a4803d281271f165aa8f/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/889f874519a774014a779de88a794f94" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/889f874519a774014a779de88a794f94/raw/660454f6eccf6c9d93c95af508e597fad4f5379b/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/2868649fde2ceed413ff" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/2868649fde2ceed413ff/raw/94ee3930d430b86e07c69b3c0ac637c634466f2f/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/c6c4da335b84b2b7cc4bcb0d4bd9b4d4" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/c6c4da335b84b2b7cc4bcb0d4bd9b4d4/raw/f0eb5e506c0dc3443effa000c03a45333e6935b1/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/07202c6312437c896ac1dc2ba1c6dbd4" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/07202c6312437c896ac1dc2ba1c6dbd4/raw/9b555d8c4ad33bb566522784dc88590e931faa30/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/d0aebe637bc205f8c9152b861f362b28" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/d0aebe637bc205f8c9152b861f362b28/raw/1da30ff869fc56142fe2df869489cd389caf3cf2/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/482005612916b3f5e408" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/482005612916b3f5e408/raw/7c05bc7b136a269d39e87138d745c368f69560f0/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
<div class="column">
<div class="ItemCard">
<a class="ItemCard__dest cover" href="https://bl.ocks.org/jonsadka/274fe6247fd561425296" target="_blank"></a>
<figure class="ItemCard__thumb">
<img src="https://gist.githubusercontent.com/jonsadka/274fe6247fd561425296/raw/f6d5295a3fc4353a035154373896e3b3083db4cc/thumbnail.png" height="340" width="510" alt="">
<span class="shadow cover"></span>
</figure>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment