Last active
December 9, 2018 02:49
-
-
Save shishirarora3/ae59ade438eecfda210bd4f2e585fb54 to your computer and use it in GitHub Desktop.
Flexbox YouTube Thumbnail Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<main role="main"> | |
<section class="videos" id="featured-videos"> | |
<div class="video-grid front-page" id="front-page-videos"> | |
<ul class="video-list featured"> | |
<li class="video featured"> | |
<a data-fancybox href="https://www.youtube.com/embed/Zq6Crtglztk?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video"> | |
<figure style="background-image: url(https://img.youtube.com/vi/Zq6Crtglztk/hqdefault.jpg);"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/video-thumb-placeholder-16-9.png" /> | |
<figcaption>Swap-Meet Speed for Roadkill Nights</figcaption> | |
</figure> | |
</a> | |
</li> | |
<li class="video featured"> | |
<a data-fancybox href="https://www.youtube.com/embed/qDK86kzgUPg?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video"> | |
<figure style="background-image: url(https://img.youtube.com/vi/qDK86kzgUPg/hqdefault.jpg);"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/video-thumb-placeholder-16-9.png" /> | |
<figcaption>Cummins Diesel in a Cadillac</figcaption> | |
</figure> | |
</a> | |
</li> | |
<li class="video featured"> | |
<a data-fancybox href="https://www.youtube.com/embed/uSB2_428P2w?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video"> | |
<figure style="background-image: url(https://img.youtube.com/vi/uSB2_428P2w/hqdefault.jpg);"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/video-thumb-placeholder-16-9.png" /> | |
<figcaption>Dirt-Track Challenger Rescue and Thrash</figcaption> | |
</figure> | |
</a> | |
</li> | |
<li class="video featured"> | |
<a data-fancybox href="https://www.youtube.com/embed/pOhl6oVpEes?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video"> | |
<figure style="background-image: url(https://img.youtube.com/vi/pOhl6oVpEes/hqdefault.jpg);"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/video-thumb-placeholder-16-9.png" /> | |
<figcaption>Junkyard 1956 Buick Hack</figcaption> | |
</figure> | |
</a> | |
</li> | |
<li class="video featured"> | |
<a data-fancybox href="https://www.youtube.com/embed/PVs_xZ46Cxw?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video"> | |
<figure style="background-image: url(https://img.youtube.com/vi/PVs_xZ46Cxw/hqdefault.jpg);"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/video-thumb-placeholder-16-9.png" /> | |
<figcaption>Wheelstanding Dump Truck! Stubby Bob’s Comeback</figcaption> | |
</figure> | |
</a> | |
</li> | |
<li class="video featured"> | |
<a data-fancybox href="https://www.youtube.com/embed/C4jk51rgfts?autoplay=1&controls=0&showinfo=0&color=white&rel=0" class="featured-video"> | |
<figure style="background-image: url(https://img.youtube.com/vi/C4jk51rgfts/hqdefault.jpg);"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/video-thumb-placeholder-16-9.png" /> | |
<figcaption>Will It Go 10s? Mazdarati Is Back!</figcaption> | |
</figure> | |
</a> | |
</li> | |
</ul> | |
</div | |
</section> | |
</main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/jquery.fancybox-three.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Grid styles | |
*/ | |
.video-grid.front-page { | |
max-width: 1280px; | |
margin: 0 auto; | |
padding: 1em 2em; | |
} | |
ul.video-list { | |
display: flexbox; | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
} | |
li.video { | |
flex-grow: 1; | |
position: relative; | |
ooverflow: hidden; | |
width: 33.333333333%; | |
width: -webkit-calc(100% / 3); | |
width: calc(100% / 3); | |
border: solid 0.2em transparent; | |
& a { | |
outline: none; | |
} | |
&:before { | |
content: ""; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0, 0, 0, 0); | |
transition: background-color 0.15s; | |
} | |
& figure { | |
display: block; | |
position: relative; | |
overflow: hidden; | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-size: cover; | |
& img { | |
display: block; | |
max-width: 100%; | |
height: auto; | |
opacity: 0; | |
transform: scale(0.5); | |
transition: all 0.2s; | |
} | |
& figcaption { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
background: rgba(0, 0, 0, 0.6); | |
color: #fff; | |
font-size: 1.4rem; | |
font-weight: 600; | |
padding: 1rem; | |
transform: translateY(0); | |
opacity: 1; | |
transition: all 0.2s; | |
} | |
} | |
&:hover { | |
& figure { | |
& img { | |
opacity: 1; | |
transform: scale(1); | |
} | |
& figcaption { | |
opacity: 0; | |
transform: translateY(50%); | |
} | |
} | |
} | |
&:hover:before { | |
background-color: rgba(0, 0, 0, 0.3); | |
} | |
} | |
@media screen and (max-width: 800px) { | |
li.video { | |
width: 50%; | |
width: -webkit-calc(100% / 2); | |
width: calc(100% / 2); | |
} | |
} | |
@media screen and (max-width: 640px) { | |
li.video { | |
width: 100%; | |
} | |
} | |
/** | |
* Pen styles | |
*/ | |
html { | |
box-sizing: border-box; | |
height: 100%; | |
overflow-y: scroll; | |
font-size: 62.5%; | |
} | |
*, | |
*:before, | |
*:after { | |
box-sizing: inherit; | |
} | |
body { | |
background: #fff; | |
color: #444; | |
font-family: "Open Sans", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
font-size: 1.8rem; | |
line-height: 1.2; | |
} | |
main { | |
padding: 2rem 0; | |
} | |
article { | |
max-width: 1280px; | |
margin: 0 auto; | |
padding: 1em 2em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/jquery.fancybox-three.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment