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)
	}
}

<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>