JSFiddle - React, Tailwind, and code Playground

by CreativeDreams

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
	<section>
		<div class="container">
			<div class="row no-gutters">

				<article class="col-md-6 col-lg-4 col-xl-4">
					<div class="ct-card-inner">
						<figure>
							<a href="" class="ct-image-container">
								<img src="https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?w=1568&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
								<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
							</a>
						</figure>
					</div>	
				</article>

				<article class="col-md-6 col-lg-4 col-xl-4">
					<div class="ct-card-inner">
						<figure>
							<a href="" class="ct-image-container">
								<img src="https://images.unsplash.com/photo-1465126188505-4f04a0f23a4d?w=1550&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
								<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
							</a>
						</figure>
					</div>
				</article>

				<article class="col-md-6 col-lg-4 col-xl-4">
					<div class="ct-card-inner">
						<figure>
							<a href="" class="ct-image-container">
								<img src="https://images.unsplash.com/photo-1495250357898-6822052ef5b8?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
								<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
							</a>
						</figure>
					</div>
				</article>

				<article class="col-md-6 col-lg-4 col-xl-4">
					<div class="ct-card-inner">
						<figure>
							<a href="" class="ct-image-container">
								<img src="https://images.unsplash.com/photo-1446080501695-8e929f879f2b?w=1567&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
								<div class="ct-ratio" style="padding-bottom: 133.3%"></div>
							</a>
						</figure>
					</div>
				</article>

				<article class="col-md-6 col-lg-4 col-xl-4">
					<div class="ct-card-inner">
						<figure>
							<a href="" class="ct-image-container">
								<img...

SCSS

section {
	padding: 100px 0;
}


figure {
	margin: 0;
	overflow: hidden;

	&:before {
		position: absolute;
		z-index: 2;
		content: '';
		width: 100%;
		height: 100%;
		background: rgba(43, 43, 54, 0);
		transition: background 1s cubic-bezier(0.2,1,0.2,1);
	}

	.ct-image-container {
		display: flex;
		position: relative;
		transform: scale3d(1, 1, 1);
		transition: transform 1s cubic-bezier(0.2,1,0.2,1);

		img {
			position: absolute;
			width: 100%;
			height: 100%;
			max-width: 100%;
			max-height: 100%;
			object-fit: cover;
			object-position: center center;
		}
	}
}

article:hover {

	figure {
		&:before {
			background: rgba(43, 43, 54, 0.7);
		}

		.ct-image-container {
			transform: scale3d(1.1, 1.1, 1);
		}
	}

}