I will modify the CSS to use background-size transition, which might be acceptable,
OR I will update JS in the next step to use an actual
![]()
tag for better accessibility and animation.
For now, let's try background-size transition.
*/
.gift-image-wrapper {
transition: background-size 0.5s ease;
background-size: 100%; /* Start normal cover */
background-position: center;
background-repeat: no-repeat;
}
.gift-card:hover .gift-image-wrapper {
/* Scaling background image is tricky with 'cover'.
Let's switch strategy in JS to use
![]()
for better animation.
For now, let's just add a subtle brightness lift. */
filter: brightness(1.02);
}
/* 2. Modern Typography for Cards */
.gift-title-price {
font-family: var(--primary-font); /* Switching to Serif for titles adds elegance */
font-size: 1.1rem;
font-weight: 600;
margin-top: 10px;
color: var(--text-color-headings);
}
.price-tag {
/* Refined pill */
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
font-family: var(--secondary-font);
letter-spacing: 0.5px;
}
/* 3. Glassmorphism Modal */
.modal {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal-overlay {
background-color: rgba(60, 50, 40, 0.6); /* Lighter, warmer overlay */
backdrop-filter: blur(3px);
}
/* --- NEW IMAGE STYLES FOR ZOOM (Using img tag) --- */
.gift-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
background-color: #f0f0f0;
}
.gift-image {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure image covers the square area */
transition: transform 0.6s ease;
display: block; /* Remove bottom space */
}
.gift-card:hover .gift-image {
transform: scale(1.1); /* The Zoom Effect */
}
.gift-card.offered .gift-image {
filter: grayscale(100%) opacity(0.6);
}
/* Remove old .gift-img-content if unused, but keeping clean */
/* --- SCROLL ANIMATIONS --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate-on-scroll {
opacity: 0; /* Hidden by default */
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* --- CORRECTIF FORCE POUR LES IMAGES --- */
/* 1. On nettoie le conteneur de l'image */
.gift-image-wrapper {
position: relative !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important; /* Carré parfait */
overflow: hidden !important;
background: #f0f0f0 !important; /* Fond gris clair si pas d'image */
display: block !important;
padding: 0 !important;
height: auto !important;
}
/* 2. IMPORTANT : On supprime le bloc invisible qui "pousse" l'image dehors */
.gift-image-wrapper::before,
.gift-image-wrapper::after {
display: none !important;
content: none !important;
}
/* 3. On force l'image à prendre toute la place */
.gift-image {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* L'image remplit le carré sans être déformée */
display: block !important;
z-index: 10; /* On s'assure qu'elle est au-dessus */
opacity: 1 !important;
transform: none !important; /* On annule les effets de zoom temporairement */
}