After multiple attempts, I am still unable to determine why the text only appears when hovering over the last two product-cards in this grid layout. The preceding two cards display the text only when hovering over a specific area within the card, and the ones before that do not show any text at all...
@font-face {
font-family: 'Montserrat-Light';
src: url(fonts\Montserrat-Light.ttf) format(ttf);
}
@font-face {
font-family: 'SuisseIntl-Regular';
src: url(SuisseIntl-Regular.ttf) format(ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
ul {
list-style: none;
}
.product-grid {
position: relative;
z-index: -1;
display: grid;
top: 200px;
grid-template-columns: repeat(2, 300px);
width: 200px;
grid-gap: 0px;
border: 0px solid blue;
justify-content: center;
}
.product-card {
position: relative;
border: 1px solid blue;
background-color: white;
padding: 20px;
text-align: center;
align-items: center;
}
.product-card img{
width: 200px;
align-items: baseline;
}
.product-card .product-title,
.product-card .price {
font: 12px SuisseIntl-Regular, sans-serif;
color: lightgray;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.product-card:hover .product-title,
.product-card:hover .price {
font: 12px SuisseIntl-Regular, sans-serif;
color: lightgray;
opacity: 1;
visibility: visible;
}
.product-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-title .price {
margin:auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Hamburger Animation</title>
<link rel="stylesheet" href="styles\shopall.css">
</head>
<body>
<div class="product-grid">
<div class="product-card">
<a href="#home" title=""><img src="images\New Balance\Aimé Leon Dore x 550 'Evergreen'\1.png" alt="Product 1"></a>
<h3 class="product-title">Aimé Leon Dore x 550 'Evergreen'</h3>
<p class="price">200 €</p>
</div>
<div class="product-card">
<img src="images\New Balance\Aimé Leon Dore x 550 'Green Yellow'\1.png" alt="Product 2">
<h3 class="product-title">Aimé Leon Dore x 550 'Green Yellow'</h3>
<p class="price">744 €</p>
</div>
......and so on....