Customize CSS for sizes on hover - Prestige Theme

[Vic1208]

Hi, 

I wanted to add the sizes on hover on my product card.

After some research, I found a way to edit the code to make it look like this : 

(I used gpt to help me find a style i like a bit and modify the css) 

It works only when hovering so its perfect... but I would like to make it look different. 

I would like to make it look like this : (even if its without the product name, i would like to make a background to it and make sure the "+" is part of it because its for quick buy) 

Here is the css for now : (with french notes but nevermind) 

/* TAILLES DISPONIBLES SUR LE SURVOL DU PRODUIT */
.product-card__sizes {
position: absolute;
bottom: 10px; /* Position légèrement au-dessus du bas de l'image */
left: 50%; /* Centré horizontalement */
transform: translateX(-50%); /* Ajustement pour centrer */
max-width: calc(100% - 100px); /* Zone élargie */
display: flex;
flex-wrap: nowrap; /* Force les tailles à rester sur une seule ligne */
justify-content: center;
gap: 8px; /* Espacement entre les tailles */
font-family: 'Roboto', sans-serif; /* Police Roboto */
font-size: 0.55rem; /* Taille réduite de 25% pour ordinateur */
text-align: center;
padding: 0; /* Pas de padding global */
background: transparent; /* Pas de fond pour le conteneur global */
border-radius: 0; /* Pas de coins arrondis pour le conteneur global */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10; /* Assure que ça reste au-dessus de l'image */
pointer-events: none; /* Ne bloque pas les clics en dehors */
}

/* Afficher les tailles au survol */
.product-card__figure:hover .product-card__sizes {
opacity: 1;
visibility: visible;
pointer-events: auto; /* Active les clics lorsque les tailles sont visibles */
}

/* Styles pour chaque taille individuelle */
.product-card__size {
padding: 3px 8px; /* Padding légèrement réduit */
background: rgba(255, 255, 255, 0.75); /* Fond blanc légèrement transparent */
color: black; /* Texte noir pour contraster avec le fond blanc */
cursor: default; /* Pas de curseur cliquable */
border: 1px solid rgba(255, 255, 255, 1); /* Bordure noire adoucie */
border-radius: 4px; /* Coins arrondis pour chaque taille */
margin: 0; /* Pas de marge supplémentaire */
box-shadow: none; /* Suppression des ombres autour des tailles */
font-size: 0.65rem; /* Taille réduite de 25% */
width: auto; /* Permet aux tailles de s'adapter à leur contenu */
}

/* Taille indisponible (barrée) */
.product-card__size.unavailable {
text-decoration: line-through;
color: #777; /* Couleur grisée pour les tailles non disponibles */
}

/* Enlever tout style par défaut de border, ombre, ou autres propriétés sur .product-card__size */
.product-card__size * {
border: none !important;
box-shadow: none !important;
outline: none !important;
}

/* Ajuster pour les appareils mobiles */
@media (max-width: 767px) {
.product-card__sizes {
font-size: 0.45rem; /* Taille augmentée pour mobile */
max-width: calc(100% - 40px); /* Zone légèrement plus petite pour mobile */
flex-wrap: wrap; /* Permet aux tailles de revenir à la ligne si nécessaire sur mobile */
}

.product-card__size {
padding: 1px 3px; /* Pas de changement pour mobile */
font-size: 0.45rem; /* Police augmentée pour mobile */
background: rgba(255, 255, 255, 0.8); /* Fond blanc légèrement transparent */
border: 1px solid rgba(0, 0, 0, 0.5); /* Bordure noire adoucie pour mobile */
color: black; /* Texte noir pour mobile */
}
}

Thanks a lot ! I wish someone can help me 

Vic

[TheScriptFlow]

If you can share the store URL and Password then it would be easy for me to gave you solution.

[Vic1208]

Hi, 

You need access to the back office ? 

or just the link of the website ? 

www.ekyog.com 

The website is public. If you need anything I'll reply to you asap. 

Thanks a lot 

[TheScriptFlow]

I need store access. Please share collab code in the p/m.

[Small_Task_Help]

Hi,

Hope this will help

- Wrap sizes + "+" button in a box
- Update CSS
CSS example

/* WRAPPER for sizes + Quick Buy */
.product-card__sizes {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9); /* Soft white background */
  border-radius: 20px; /* Smooth rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

/* Show on hover */
.product-card__figure:hover .product-card__sizes {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Each size */
.product-card__size {
  background: white;
  color: black;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 0.65rem;
  font-family: 'Roboto', sans-serif;
  cursor: default;
}

/* Unavailable sizes */
.product-card__size.unavailable {
  text-decoration: line-through;
  color: #999;
}

/* Add "+" Quick Buy button */
.product-card__quickbuy {
  background: #000;
  color: #fff;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: Remove product name */
.product-card__title {
  display: none;
}

- Add the "+" button in your Liquid file
- Do Mobile Responsiveness