Flex-Box Grid with Hover Effects using CSS
2 min readHere we will understand the following points on Create Flex-Box Grid with Hover Effects using CSS.
- How to create a thumbnail grid in CSS.
- How to create thumbnail grid Hover in CSS.
CSS Code
thumbnail-grid {
user-select: none
}
.thumbnail-grid figure {
position: relative;
min-width: 200px;
height: 150px;
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-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
align-content: stretch
}
.flex-item {
flex: 1 0 auto
}
/* DEMO STYLING */
* {
box-sizing: border-box
}
html {
height: 100%;
font-size: 62.5%;
}
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.8rem;
background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
}
a {
color: #333;
text-decoration: none;
}
h1 {
font-family: Merriweather, serif;
}
/* Thumbnails, just for demo purposes */
.thumbnail-grid figure.i1 {
background: url(http://ask-me.in/wp-content/uploads/2019/05/code-coder-codes-2194062.jpg) no-repeat center;
background-size: cover
}
.thumbnail-grid figure.i2 {
background: url(http://ask-me.in/wp-content/uploads/2019/06/brunette-computer-computer-keyboard-2084974.jpg) no-repeat center;
background-size: cover
}
.thumbnail-grid figure.i3 {
background: url(http://ask-me.in/wp-content/uploads/2019/05/code-coder-codes-2194062.jpg) no-repeat center;
background-size: cover
}
/* Thumbnails for HiDPI/retina screens */
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
.thumbnail-grid figure.i1 {
background-image: url(http://ask-me.in/wp-content/uploads/2019/05/code-coder-codes-2194062.jpg)
}
.thumbnail-grid figure.i2 {
background-image: url(http://ask-me.in/wp-content/uploads/2019/06/brunette-computer-computer-keyboard-2084974.jpg)
}
.thumbnail-grid figure.i3 {
background-image: url(http://ask-me.in/wp-content/uploads/2019/05/code-coder-codes-2194062.jpg)
}
}
HTML Code
<main>
<h1> Flexbox Grid with Hover Effects using CSS</h1>
<section class="thumbnail-grid flex">
<a href="http://ask-me.in/how-to-create-basic-captcha-in-asp-net/" class="flex-item">
<figure class="i1">
<figcaption>Grid 1</figcaption>
</figure>
</a>
<a href="http://ask-me.in/how-to-call-javascript-method-from-code-behind-in-asp-net/" class="flex-item">
<figure class="i2">
<figcaption>Grid 2</figcaption>
</figure>
</a>
<a href="http://ask-me.in/10-tricks-to-create-computer-virus/" class="flex-item">
<figure class="i3">
<figcaption>Grid 3</figcaption>
</figure>
</a>
</section>
<p>You are free to use this code.<br>If you have any suggestions, please leave a comment.</p>
</main>
Like!! Really appreciate you sharing this blog post.Really thank you! Keep writing.