Expanding Cards - use this for expanding ad pages

expanding-cards.markdown

Expanding Cards

Expanding Cards gallerie with html, css and Javascript

A Pen by Abdelkarim KHALLOUK on CodePen.

License.

index.html

<div class="container">
	<div class="panel panel-1">
		<h3>Explore the word</h3>
	</div>
	<div class="panel panel-2">
		<h3>Beautiful blue sky</h3>
	</div>
	<div class="panel panel-3 active">
		<h3>Mountain</h3>
	</div>
	<div class="panel panel-4">
		<h3>Sunrise</h3>
	</div>
	<div class="panel panel-5">
		<h3>Night sky stars falling</h3>
	</div>
</div>

script.js

const panels = document.querySelectorAll(".panel");

panels.forEach((panel) => {
	panel.addEventListener("click", () => {
		removeActiveClasses(panels);
		panel.classList.add("active");
	});
});

function removeActiveClasses(panels) {
	panels.forEach((panel) => {
		panel.classList.remove("active");
	});
}

style.css

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap");

* {
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	background-color: #05070f;
}

.panel-1 {
	background-image: url("https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
}

.panel-2 {
	background-image: url("https://images.unsplash.com/photo-1436891620584-47fd0e565afb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
}

.panel-3 {
	background-image: url("https://images.unsplash.com/photo-1465080357990-d4bc259ec4a9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
}

.panel-4 {
	background-image: url("https://images.unsplash.com/photo-1572003818138-19cf96ee15e7?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
}

.panel-5 {
	background-image: url("https://images.unsplash.com/photo-1472552944129-b035e9ea3744?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80");
}

.container {
	display: flex;
	width: 90%;
}

.panel {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 80vh;
	border-radius: 30px;
	cursor: pointer;
	flex: 0.5;
	margin: 5px;
	position: relative;
	transition: flex 0.7s ease-in;
}

.panel h3 {
	position: absolute;
	top: 30px;
	left: 20px;
	color: rgb(247, 251, 255);
	font-size: 30px;
	margin: 0;
	opacity: 0;
}

.panel.active {
	flex: 5;
}

.panel.active h3 {
	opacity: 1;
	transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
	.container {
		width: 100vw;
	}

	.panel:nth-of-type(4),
	.panel:nth-of-type(5) {
		display: none;
	}
}