Display size on product card when hover (collection page) - Prestige Theme

[Vic1208]

Hi, 

I would like to add the available sizes when hover on the product card (when on the collection page). 

Here is what I have for now :

When hovering, a "+" appear to quick buy, if I click it a window appears with every details and the possibility to add to cart. I like this feature, its great, but I would like to display more information when simply hovering (more than just the "+")

Here is a quick edit I did to show what I would like (even if it's not the right font and everything...) It's just a quick mock up to show the idea : 

Here, when hovering, it shows the product name and the available size with still the "+" to display the quick buy menu. 

Do you think its possible ? I can't code myself but I easily understand what to do and why If you tell me which code i need to paste where and which thing I have to modify based on my code. 

I can share any information. 

Thanks a lot, 

Victor 

[Small_Task_Help]

Hi,

Hope this will help

-Locate Product Card File
-Find Where Hover Content Is
Some thing like product-card__overlay or product-card__content

- Add Sizes on Hover

Code example

{% if product.variants.size > 1 %}
  <div class="product-sizes">
    {% for variant in product.variants %}
      {% if variant.available %}
        <span class="product-size">{{ variant.option1 }}</span>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

- Use CSS for style

[Vic1208]

Hello, 

Thanks for your reply, 

Unfortunately, I can't find the "hover" part on the product card... 

I do believe its in the product-card.liquid but there isn't any part for the hover thing. 

If I paste your code in the product-card.liquid directly, obviously the sizes display constantly and below the product card : 

Anyway, 

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 like my exemple. Do you think you can help me ? 

Here is the css for now : (with french notes but you don't care) 

/* 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 find the way to make it look like this : 

Vic