WordPress/elementor-category-grid-widget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: styling

Browse Source
This commit is contained in:
MrRaph_
2025-05-23 15:59:44 +00:00
parent 1704d64ed5
commit 202a1469b8
3 changed files with 67 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
css/style.css
View File

@@ -1,63 +1,45 @@
/* css/style.css */
/* —————————————————————————————————————————— */
/* ZONES GLOBALES (overlay, cartes, images…) */
/* —————————————————————————————————————————— */
/* 0) Cartes en conteneur relatif */
.elementor-category-grid .category-card {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 40%; /* ratio 5:2 */
}
/* pseudo-élément overlay */
/* overlay via pseudo-élément */
.elementor-category-grid .category-card::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: transparent;
transition: opacity .3s ease;
pointer-events: none; /* laisse passer le clic */
pointer-events: none;
}
/* 1) Mise en place de la grille */
.elementor-category-grid {
display: grid;
gap: 1rem;
}
/* Nombre de colonnes dynamiques */
.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
/* 2) Chaque carte = conteneur relatif */
.elementor-category-grid .category-card {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */
/* border-radius: 8px; */
}
/* 3) Image pleine carte */
/* images pleines cartes */
.elementor-category-grid .category-card img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
/* 4) Effet hover : léger zoom */
/* zoom au hover */
.elementor-category-grid .category-card:hover img {
transform: scale(1.05);
}
/* 5) Titre centré en overlay */
/* titre centré */
.elementor-category-grid .category-card-name {
position: absolute;
top: 50%;
left: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: .5em 1em;
@@ -65,12 +47,49 @@
line-height: 1.2;
text-align: center;
color: #ffffff;
/* background: rgba(0, 0, 0, 0.4); */
/* border-radius: 4px; */
transition: background .3s ease;
white-space: pre-wrap;
word-break: break-word;
transition: font-size .3s ease, padding .3s ease;
}
/* 6) Hover sur titre : fond un peu plus opaque */
/* .elementor-category-grid .category-card:hover .category-card-name {
background: rgba(0, 0, 0, 0.6);
} */
/* —————————————————————————————————————————— */
/* DISPOSITION DE LA GRILLE */
/* —————————————————————————————————————————— */
/* 1) Par défaut : auto-fit (desktop) */
.elementor-category-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* 2) Mobile (≤ 480px) → 1 colonne forcée */
@media screen and (max-width: 480px) {
.elementor-category-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
.elementor-category-grid .category-card-name {
font-size: 1rem;
padding: .4em .8em;
}
}
/* 3) Tablette (481px–768px) → 2 colonnes */
@media screen and (min-width: 481px) and (max-width: 768px) {
.elementor-category-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.elementor-category-grid .category-card-name {
font-size: 1.2rem;
}
}
/* 4) Desktop (≥ 769px) → respect des classes columns-X */
@media screen and (min-width: 769px) {
.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); }
.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
}