thumbnail

by Aleksandr Zidyganov

HTML

<div class="gallery">
    <img src="https://placehold.it/900x500" alt="">
    <div class="desc">My Text</div>
</div>
<div class="gallery">
    <img src="https://placehold.it/500x900" alt="">
    <div class="desc">My long long text</div>
</div>

CSS

.gallery {
	position: relative;
	width: 200px;
	height: 200px;
	overflow: hidden;
	margin-top: 5vh;
	margin-right: 0.5vh;
	border: 1px solid #ccc;
	float: left;
}

.gallery img {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}


.desc {
	display: block;
	position: absolute;
	top: 85%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}