Skip to content

Instantly share code, notes, and snippets.

@santosh

santosh/bottom-flex-belt.html

Last active October 8, 2016 03:36
Show Gist options
  • Save santosh/8fd0b26266e11bbb2054d6c9b0b862f8 to your computer and use it in GitHub Desktop.
Save santosh/8fd0b26266e11bbb2054d6c9b0b862f8 to your computer and use it in GitHub Desktop.
Download ZIP
Bottom flex belt, as was done in ajneffects.com inspired from redgiant.com, but later replaced with something better. Pen here for future reference if ever needed to make one.
Raw
bottom-flex-belt.html
<!DOCTYPE html>
<html>
<head>
<title> Practicing </title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<style type="text/css">
.thumbnail-grid {
user-select: none
}
.thumbnail-grid figure {
position: relative;
min-width: 200px;
height: 250px;
margin: 5px;
border-radius: 3px;
box-shadow: inset 0 -40px 0 0 rgba(0,0,0,.1);
transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover {
box-shadow: inset 0 -150px 0 0 rgba(0,0,0,.5);
}
.thumbnail-grid figcaption {
position: absolute;
width: 100%;
text-align: center;
color: #f4f4f4;
text-shadow: 0 0 3px #000;
bottom: 10px;
transition: all .2s ease-in-out
}
.thumbnail-grid figure:hover figcaption {
bottom: 60px
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-item {
flex: 1 0 auto;
}
/* DEMO STYLING */
* {
box-sizing: border-box
}
figcaption {
font-family: 'Josefin Sans', sans-serif;
}
/* Thumbnails, just for demo purposes */
.thumbnail-grid figure.products {
background: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97240&w=350&h=240") no-repeat center;
background-size: cover;
}
.thumbnail-grid figure.tutorials {
background: url("http://ajneffects.com/assets/img/tutorial-thumbnail-optimized.jpg") no-repeat center;
background-size: cover;
}
.thumbnail-grid figure.films {
background: url("http://ajneffects.com/assets/img/films-thumbnail-optimized.jpg") no-repeat center;
background-size: cover;
}
.thumbnail-grid figure.blog {
background: url("http://ajneffects.com/assets/img/blog-thumbnail-optimized.jpg") no-repeat center;
background-size: cover;
}
</style>
<body>
<main>
<section class="thumbnail-grid flex">
<a href="http://ajneffects.com/products-link" class="flex-item">
<figure class="products">
<figcaption>Products</figcaption>
</figure>
</a>
<a href="http://ajneffects.com/tutorials-link/" class="flex-item">
<figure class="tutorials">
<figcaption>Tutorials</figcaption>
</figure>
</a>
<a href="http://ajneffects.com/films" class="flex-item">
<figure class="films">
<figcaption>AJN Effects Films</figcaption>
</figure>
</a>
<a href="http://ajneffects.com/blog/" class="flex-item">
<figure class="blog">
<figcaption>Blog</figcaption>
</figure>
</a>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment