68 lines
1.8 KiB
CSS
68 lines
1.8 KiB
CSS
/* css/style.css */
|
||
|
||
/* 1) Mise en place de la grille */
|
||
/* .elementor-category-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1rem;
|
||
} */
|
||
.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 */
|
||
.elementor-category-grid .category-card img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform .4s ease;
|
||
}
|
||
|
||
/* 4) Effet hover : léger zoom */
|
||
.elementor-category-grid .category-card:hover img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 5) Titre centré en overlay */
|
||
.elementor-category-grid .category-card-name {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
margin: 0;
|
||
padding: .5em 1em;
|
||
font-size: 1.5rem;
|
||
line-height: 1.2;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
/* background: rgba(0, 0, 0, 0.4); */
|
||
border-radius: 4px;
|
||
transition: background .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);
|
||
} */
|