.card-container { display: flex; } .card { position: relative; overflow: hidden; width: 200px; /* Ajustez la largeur selon vos besoins */ margin-right: 20px; /* Espace entre les images */ } img { width: 100%; height: auto; display: block; transition: transform 0.3s; } .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; opacity: 0; transition: opacity 0.3s; } .card:hover img { transform: scale(1.1); } .card:hover .overlay { opacity: 1; background: rgba(0, 0, 0, 0.5); /* Filtre noir sur l'image */ }