<a class="post-card" href="#">
	<div class="inner">
		<img src="https://i.picsum.photos/id/1000/5626/3635.jpg?hmac=qWh065Fr_M8Oa3sNsdDL8ngWXv2Jb-EE49ZIn6c0P-g">
		<div class="text-content">Lorem Ipsum</div>
	</div>
</a>
@import url("https://fonts.googleapis.com/css2?family=Exo+2&display=swap");

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	font-family: "Exo 2", sans-serif;
	background-color: #1e1f26;
}

.post-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 350px;
	min-width: 150px;
	margin: 1rem;
	border: 1px solid #ebebeb;
	color: #151515;
	cursor: pointer;
	border-radius: 15px;
	background-color: #ffffff;
	transition: all 0.12s ease-in-out;
	background-color: #e9e9e9;
	text-decoration: none;

	.inner {
		position: relative;
		height: 0;
		padding-bottom: 100%;

		img {
			object-fit: cover;
			object-position: center center;
			position: absolute;
			width: 100%;
			height: 100%;
			filter: brightness(50%);
			transition: all 0.12s ease-in-out;
			z-index: 1;
		}
		
		.text-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			text-transform: uppercase;
			font-size: 2rem;
			color: #ffffff;
			text-align: center;
			z-index: 3;
		}
	}

	&:hover {
		img {
			transform: scale(1.2);
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.