<div class="hero">
	<div class="projects">
		<div class="col-list">
			<div class="col-list__item">
				<a href="#" class="hover-trigger">Project-1</a>
				<div class="bg-img img-1"></div>
			</div>
			<div class="col-list__item">
				<a href="#" class="hover-trigger">Project-2</a>
				<div class="bg-img img-2"></div>
			</div>
			<div class="col-list__item">
				<a href="#" class="hover-trigger">Project-3</a>
				<div class="bg-img img-3"></div>
			</div>
			<div class="col-list__item">
				<a href="#" class="hover-trigger">Project-4</a>
				<div class="bg-img img-4"></div>
			</div>
		</div>
	</div>
</div>

body {
	background: blue;
}

/* .hero {
} */

/* .projects {
} */

/* .col-list {
} */
.col-list__item {
	padding: 16px;
	margin: 16px 0;
	& .bg-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		visibility: hidden;
		opacity: 0;
		transition: visibility 0.4s, opacity 0.4s ease;
		z-index: -1;
	}
	& a {
		display: block;
		padding: 16px;
		font-size: 64px;
		border-block: 1px solid white;
		text-decoration: none;
		color: white;
	}
}

a:hover + .bg-img {
	visibility: visible;
	transition-delay: 0s;
	opacity: 1;
}

/*  for mobile devices*/

@media (hover: hover) {
	.hover-trigger:hover + .bg-img {
		visibility: visible;
		opacity: 1;
	}
}

.img-1 {
	background-image: url("https://cdn.prod.website-files.com/677d6363214b541ee305185c/678380b29eec5d3a504b8dd4_Bildschirmfoto%202024-06-18%20um%2016.45.32.png");
}

.img-2 {
	background-image: url("https://cdn.prod.website-files.com/677d6363214b541ee305185c/6783820bec8bc03db5d17c18_Bildschirmfoto%202024-11-05%20um%2012.30.42.png");
}

.img-3 {
	background-image: url(https://cdn.prod.website-files.com/677d6363214b541ee305185c/6792275dc03a4e79c999d196_CL001-icons-FINAL-4084-by_sixnine.jpg);
}

.img-4 {
	background-image: url(https://cdn.prod.website-files.com/677d6363214b541ee305185c/679218fb70942f0e1b110d9c_AI004%20Essentials0390-FINAL.png);
}

// Mobile devices do not have `:hover` but have  "touch" instead. to make it work on mobile devices you need to use JS
document.querySelectorAll(".hover-trigger").forEach((trigger) => {
	trigger.addEventListener("touchstart", (e) => {
		e.preventDefault();
		const bgImg = trigger.nextElementSibling;
		document.querySelectorAll(".bg-img").forEach((img) => {
			img.classList.remove("active");
		});
		bgImg.classList.toggle("active");
	});
});