फुटबॉल खिलाड़ी प्रदर्शनी गैलरी

2787 Andev.web

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

20 June 2024

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

10 August 2024

गैलरी फ़िल्टर

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Figtree&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Figtree", sans-serif;
}

body {
	display: grid;
	place-content: center;
	min-height: 100vh;
	background: #000;
}
.container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 1em;
	width: 800px;
	height: 500px;
	transition: all 400ms;
}
.container:hover .box {
	filter: grayscale(100%) opacity(24%);
}
/*Andev Web*/
.box {
	position: relative;
	background: var(--img) center center;
	background-size: cover;
	transition: all 400ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container .box:hover {
	filter: grayscale(0%) opacity(100%);
}

.container:has(.box-1:hover) {
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
}

.container:has(.box-2:hover) {
	grid-template-columns: 1fr 3fr 1fr 1fr 1fr;
}

.container:has(.box-3:hover) {
	grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
}

.container:has(.box-4:hover) {
	grid-template-columns: 1fr 1fr 1fr 3fr 1fr;
}

.container:has(.box-5:hover) {
	grid-template-columns: 1fr 1fr 1fr 1fr 3fr;
}

.box:nth-child(odd) {
	transform: translateY(-16px);
}

.box:nth-child(even) {
	transform: translateY(16px);
}

.box::after {
	content: attr(data-text);
	position: absolute;
	bottom: 20px;
	background: #000;
	color: #fff;
	padding: 10px 10px 10px 14px;
	letter-spacing: 4px;
	text-transform: uppercase;
	transform: translateY(60px);
	opacity: 0;
	transition: all 400ms;
}

.box:hover::after {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 400ms;
}

फुटबॉल खिलाड़ी प्रदर्शनी गैलरी

अनुशंसित

पशु गैलरी

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

गैलरी फ़िल्टर

HTML

CSS

JS

अनुशंसित

पशु गैलरी

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

गैलरी फ़िल्टर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS