CodePen: https://codepen.io/P42s/pen/xxpGJyN

<div class="item">
	<img class="item__img" data-swap="https://i.giphy.com/media/l41m359K5ExF8aRoc/giphy.gif" src="https://www.wallpaperup.com/uploads/wallpapers/2015/05/29/702762/c7481417c549c5733d851692740f24db-700.jpg" alt="">
</div>

.item {
    width: 350px;
	height: 250px;
	position: relative;
	overflow: hidden;
}

.item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 30%;
}

var imageSwap = function () {
	var $this = $(this);
	var newSource = $this.data("swap");
	$this.data("swap", $this.attr("src"));
	$this.attr("src", newSource);
};

$(function () {
	$(".item__bg").hover(imageSwap, imageSwap);
});

Demo: https://codepen.io/P42s/pen/RwLKeep

<div class="container">
	<div class="cell cell-1">
		<h2>A</h2>
	</div>
	<div class="cell cell-2">
		<h2>B</h2>
	</div>
	<div class="cell cell-3">
		<h2>C</h2>
	</div>
</div>

.container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 500px;
	gap: 20px;
}

.cell {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	border: solid 3px #000;
	border-radius: 12px;
	width: 50%;
	padding: 50px;
	flex: 1;
}

.cell-3 {
	flex-basis: 100%;
}

@media (max-width: 767px) {
	.container {
		flex-wrap: nowrap;
	}
	.cell {
		width: 100%;
	}
	.cell-1 {
		order: 1;
	}
	.cell-2 {
		order: 3;
	}
	.cell-3 {
		order: 2;
	}
}

Buradan bakıp inceleyebilirsin.
Demo: https://codepen.io/P42s/pen/abLBMmp

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	display: grid;
	place-items: center center;
	width: 100%;
	height: 100vh;
}

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	fill: currentcolor;
}

.card {
	&-wrapper {
		position: relative;
	}

	&-item {
		width: 450px;
		height: 540px;
		position: relative;
		border-radius: 32px;
		overflow: hidden;

		.card-image {
			width: 100%;
			height: 100%;
			overflow: hiddden;
			position: relative;

			&:after {
				content: "";
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				top: 0;
				background: rgb(0, 0, 0);
				background: linear-gradient(
					180deg,
					rgba(0, 0, 0, 0) 10%,
					rgba(0, 0, 0, 0.7) 72%,
					rgba(0, 0, 0, 0.9) 100%
				);
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.card-content {
			width: 100%;
			height: 100%;
			z-index: 1;
			position: absolute;
			top: 0;
			padding: 40px;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			row-gap: 20px;

			.card-tags {
				padding: 10px 20px;
				background-color: #ff099f;
				border-radius: 100px;
				color: #fff;
				font-size: 12px;
				width: max-content;
				letter-spacing: 0.6px;
			}

			.card-title {
				font-size: 24px;
				color: #fff;
				font-weight: bold;
				line-height: 1.4;
			}

			.card-footer {
				display: flex;
				align-items: center;
				column-gap: 20px;
				font-size: 14px;
				color: #fff;

				.card-user {
					display: flex;
					align-items: center;
					column-gap: 8px;

					&-img {
						width: 36px;
						height: 36px;
						min-width: 36px;
						max-width: 36px;
						overflow: hidden;
						border-radius: 100px;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}

				.card-time,
				.card-comment {
					display: flex;
					align-items: center;
					column-gap: 8px;

					.icon {
						color: #e1a00f;
					}
				}
			}
		}
	}
}

<div class="container">
	<div class="card">
		<div class="card-wrapper">
			<div class="card-item">
				<figure class="card-image">
					<img src="https://cdn.pixabay.com/photo/2021/02/06/09/14/bright-5987558_960_720.jpg" alt="...">
				</figure>
				<a class="card-content" href="https://prototurk.com/soru/3764-css-ile-resim-golgelendirmesini-nasil-yaparim">
					<span class="card-tags">Prototurk</span>
					<h2 class="card-title">CSS ile resim gölgelendirmesini nasıl yaparım?</h2>
					<footer class="card-footer">
						<div class="card-user">
							<figure class="card-user-img">
								<img src="https://cdn.pixabay.com/photo/2016/11/29/03/15/man-1867009_960_720.jpg" alt="...">
							</figure>
							<span class="card-user-name">mamicrose</span>
						</div>
						<time class="card-time">
							<svg class="icon icon-time">
								<use xlink:href="#icon-time"></use>
							</svg>
							Dec 13, 2021
						</time>
						<span class="card-comment">
							<svg class="icon icon-comment">
								<use xlink:href="#icon-comment"></use>
							</svg>
							120
						</span>
					</footer>
				</a>
			</div>
		</div>
	</div>
</div>

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<symbol id="icon-comment" viewBox="0 0 24 24">
			<path fill="none" d="M0 0h24v24H0z" />
			<path d="M5.455 15L1 18.5V3a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v12H5.455zm-.692-2H16V4H3v10.385L4.763 13zM8 17h10.237L20 18.385V8h1a1 1 0 0 1 1 1v13.5L17.545 19H9a1 1 0 0 1-1-1v-1z" />
		</symbol>

		<symbol id="icon-time" viewBox="0 0 24 24">
			<path fill="none" d="M0 0h24v24H0z" />
			<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-8h4v2h-6V7h2v5z" />
		</symbol>
	</defs>
</svg>