Galerie d'exposition des joueurs de football

2390 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Galerie d'exposition des joueurs de football

Recommandé

27 October 2023

Un code par staticdata256

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;
}

Galerie d'exposition des joueurs de football

Recommandé

Jeu de Tetris simple

Un code par bachir123

Un code par staticdata256

HTML

CSS

JS

Recommandé

Jeu de Tetris simple

Un code par bachir123

Un code par staticdata256

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS