Hovering over something in a grid layout - ERROR Javascript
Question
I have tried everything and i can't tell why the hell the text is only appearing on hovering the last two product-card on this grid layout and the two before appear but only when i hover a certain of the product-card and not the whole product-card and the product-card before those when hovering do not have text appearing 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> <div class="product-card"> <img src="images\New Balance\Aimé Leon Dore x 827 'White'\1.png" alt="Product 3"> <h3 class="product-title">Aimé Leon Dore x 827 'White'</h3> <p class="price">897 €</p> </div> <div class="product-card"> <img src="images\New Balance\Salehe Bembury x 2002R 'Peace Be The Journey'\1.png" alt="Product 3"> <h3 class="product-title">Salehe Bembury x 2002R 'Peace Be The Journey'</h3> <p class="price">544 €</p> </div> <div class="product-card"> <img src="images\New Balance\990v4 Made in USA 'Made in 1982'\1.png" alt="Product 3"> <h3 class="product-title">990v4 Made in USA 'Made in 1982'</h3> <p class="price">250 €</p> </div> <div class="product-card"> <img src="images\BAPE\Sk8 Sta 2 'ABC Camo - Red'\1.png" alt="Product 3"> <h3 class="product-title">Sk8 Sta 2 'ABC Camo - Red'</h3> <p class="price">402 €</p> </div> <div class="product-card"> <img src="images\BAPE\Sk8 Sta M1 'Purple'\Untitled-1.png" alt="Product 3"> <h3 class="product-title">Sk8 Sta M1 'Purple'</h3> <p class="price">402 €</p> </div> <div class="product-card"> <img src="images\Louis Vuitton\Louis Vuitton Trainer 'Violet Mesh'\1.png" alt="Product 3"> <h3 class="product-title">Louis Vuitton Trainer 'Violet Mesh'</h3> <p class="price">1.602 €</p> </div> <div class="product-card"> <img src="images\Louis Vuitton\Louis Vuitton Trainer 'White Black Blue'\1.png" alt="Product 3"> <h3 class="product-title">Louis Vuitton Trainer 'White Black Blue'</h3> <p class="price">1.602 €</p> </div> <div class="product-card"> <img src="images\Louis Vuitton\Louis Vuitton Trainer Low 'Orange Monogram Denim'\preview.png" alt="Product 3"> <h3 class="product-title">Louis Vuitton Trainer Low 'Orange Monogram Denim'</h3> <p class="price">1.602 €</p> </div> <div class="product-card"> <img src="images\Nike\Concepts x Dunk Low SB 'Orange Lobster'\1.png" alt="Product 3"> <h3 class="product-title">Concepts x Dunk Low SB 'Orange Lobster'</h3> <p class="price">490 €</p> </div> <div class="product-card"> <img src="images\Nike\Dior x Air Jordan 1 High\preview.png" alt="Product 3"> <h3 class="product-title">Dior x Air Jordan 1 High</h3> <p class="price">16.752.00 €</p> </div> <div class="product-card"> <img src="images\Nike\Dunk Low Retro QS 'Argon' 2022\5.png" alt="Product 3"> <h3 class="product-title">Dunk Low Retro QS 'Argon' 2022</h3> <p class="price">136 €</p> </div> <div class="product-card"> <img src="images\Nike\Florida A&M University x Dunk Low 'Rattlers'\1.png" alt="Product 3"> <h3 class="product-title">Florida A&M University x Dunk Low 'Rattlers'</h3> <p class="price">260 €</p> </div> <div class="product-card"> <img src="images\Nike\Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'\preview.png" alt="Product 3"> <h3 class="product-title">Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'</h3> <p class="price">8.892,00 €</p> </div> <div class="product-card"> <img src="images\Asics\Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man. Half-Alien'\preview,png" alt="Product 3"> <h3 class="product-title">Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man. Half-Alien'</h3> <p class="price">462 €</p> </div> <div class="product-card"> <img src="images\Asics\Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'\preview.png" alt="Product 3"> <h3 class="product-title">Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'</h3> <p class="price">$100</p> </div> <div class="product-card"> <img src="images\Asics\Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'\preview.png" alt="Product 3"> <h3 class="product-title">Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'</h3> <p class="price">280 €</p> </div> <div class="product-card"> <img src="images\Adidas\Wales Bonner x Samba 'Black'\preview.png" alt="Product 3"> <h3 class="product-title">Wales Bonner x Samba 'Black'</h3> <p class="price">378 €</p> </div> <div class="product-card"> <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Gazelle 'GG Monogram'\1.png" alt="Product 3"> <h3 class="product-title">Adidas x Gucci Gazelle 'GG Monogram'</h3> <p class="price">650 €</p> </div> <div class="product-card"> <img src="images\Adidas\Adidas x Gucci\adidas x Gucci men's Gazelle sneaker\preview.png" alt="Product 3"> <h3 class="product-title">Adidas x Gucci Men's Gazelle Sneakers</h3> <p class="price">650 €</p> </div> <div class="product-card"> <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'Light Blue Silk'\preview.png" alt="Product 3"> <h3 class="product-title">Adidas x Gucci Wmns Gazelle 'Light Blue Silk'</h3> <p class="price">650 €</p> </div> <div class="product-card"> <img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'White Green Red'\preview.png" alt="Product 3"> <h3 class="product-title">Adidas x Gucci Wmns Gazelle 'White Green Red'</h3> <p class="price">575 €</p> </div> <div class="product-card"> <img src="images\Adidas\Adidas x Gucci\Gucci x Gazelle 'Pink Velvet'\preview.png" alt="Product 3"> <h3 class="product-title">Gucci x Gazelle 'Pink Velvet'</h3> <p class="price">650 €</p> </div> </body> </html>
1 answers
solution1
0 ACCPTED 2023-01-18 13:07:18
i fixed your problem it was very simple mistake. Problem was that you you had set z-index; -1; on class product-grid in css. Maybe you wanted to put 1, not -1. Your class was under body. Here is your code, copy it and paste it in your editor or just remove z-index: -1, and give z-index: 1 to your product-grid element in css.
To see whats problem you can use inspect element and hover element next time. :D
<!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="style.css">
</head>
<body>
<div class="page-content">
<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>
<div class="product-card">
<img src="images\New Balance\Aimé Leon Dore x 827 'White'\1.png" alt="Product 3">
<h3 class="product-title">Aimé Leon Dore x 827 'White'</h3>
<p class="price">897 €</p>
</div>
<div class="product-card">
<img src="images\New Balance\Salehe Bembury x 2002R 'Peace Be The Journey'\1.png" alt="Product 3">
<h3 class="product-title">Salehe Bembury x 2002R 'Peace Be The Journey'</h3>
<p class="price">544 €</p>
</div>
<div class="product-card">
<img src="images\New Balance\990v4 Made in USA 'Made in 1982'\1.png" alt="Product 3">
<h3 class="product-title">990v4 Made in USA 'Made in 1982'</h3>
<p class="price">250 €</p>
</div>
<div class="product-card">
<img src="images\BAPE\Sk8 Sta 2 'ABC Camo - Red'\1.png" alt="Product 3">
<h3 class="product-title">Sk8 Sta 2 'ABC Camo - Red'</h3>
<p class="price">402 €</p>
</div>
<div class="product-card">
<img src="images\BAPE\Sk8 Sta M1 'Purple'\Untitled-1.png" alt="Product 3">
<h3 class="product-title">Sk8 Sta M1 'Purple'</h3>
<p class="price">402 €</p>
</div>
<div class="product-card">
<img src="images\Louis Vuitton\Louis Vuitton Trainer 'Violet Mesh'\1.png" alt="Product 3">
<h3 class="product-title">Louis Vuitton Trainer 'Violet Mesh'</h3>
<p class="price">1.602 €</p>
</div>
<div class="product-card">
<img src="images\Louis Vuitton\Louis Vuitton Trainer 'White Black Blue'\1.png" alt="Product 3">
<h3 class="product-title">Louis Vuitton Trainer 'White Black Blue'</h3>
<p class="price">1.602 €</p>
</div>
<div class="product-card">
<img src="images\Louis Vuitton\Louis Vuitton Trainer Low 'Orange Monogram Denim'\preview.png" alt="Product 3">
<h3 class="product-title">Louis Vuitton Trainer Low 'Orange Monogram Denim'</h3>
<p class="price">1.602 €</p>
</div>
<div class="product-card">
<img src="images\Nike\Concepts x Dunk Low SB 'Orange Lobster'\1.png" alt="Product 3">
<h3 class="product-title">Concepts x Dunk Low SB 'Orange Lobster'</h3>
<p class="price">490 €</p>
</div>
<div class="product-card">
<img src="images\Nike\Dior x Air Jordan 1 High\preview.png" alt="Product 3">
<h3 class="product-title">Dior x Air Jordan 1 High</h3>
<p class="price">16.752.00 €</p>
</div>
<div class="product-card">
<img src="images\Nike\Dunk Low Retro QS 'Argon' 2022\5.png" alt="Product 3">
<h3 class="product-title">Dunk Low Retro QS 'Argon' 2022</h3>
<p class="price">136 €</p>
</div>
<div class="product-card">
<img src="images\Nike\Florida A&M University x Dunk Low 'Rattlers'\1.png" alt="Product 3">
<h3 class="product-title">Florida A&M University x Dunk Low 'Rattlers'</h3>
<p class="price">260 €</p>
</div>
<div class="product-card">
<img src="images\Nike\Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'\preview.png" alt="Product 3">
<h3 class="product-title">Off-White x Cassius Hirst x Air Force 1 Low '07 'MCA'</h3>
<p class="price">8.892.00 €</p>
</div>
<div class="product-card">
<img src="images\Asics\Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man, Half-Alien'\preview.png" alt="Product 3">
<h3 class="product-title">Kiko Kostadinov x Brain Dead x Gel Fratelli 'Half-Man, Half-Alien'</h3>
<p class="price">462 €</p>
</div>
<div class="product-card">
<img src="images\Asics\Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'\preview.png" alt="Product 3">
<h3 class="product-title">Kiko Kostadinov x Gel Quantum Levitrack 'Candy Apple Red'</h3>
<p class="price">$100</p>
</div>
<div class="product-card">
<img src="images\Asics\Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'\preview.png" alt="Product 3">
<h3 class="product-title">Kiko Kostadinov x Hysteric Glamour x Wmns Gel Quantum Lylia 'Blue Expanse'</h3>
<p class="price">280 €</p>
</div>
<div class="product-card">
<img src="images\Adidas\Wales Bonner x Samba 'Black'\preview.png" alt="Product 3">
<h3 class="product-title">Wales Bonner x Samba 'Black'</h3>
<p class="price">378 €</p>
</div>
<div class="product-card">
<img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Gazelle 'GG Monogram'\1.png" alt="Product 3">
<h3 class="product-title">Adidas x Gucci Gazelle 'GG Monogram'</h3>
<p class="price">650 €</p>
</div>
<div class="product-card">
<img src="images\Adidas\Adidas x Gucci\adidas x Gucci men's Gazelle sneaker\preview.png" alt="Product 3">
<h3 class="product-title">Adidas x Gucci Men's Gazelle Sneakers</h3>
<p class="price">650 €</p>
</div>
<div class="product-card">
<img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'Light Blue Silk'\preview.png" alt="Product 3">
<h3 class="product-title">Adidas x Gucci Wmns Gazelle 'Light Blue Silk'</h3>
<p class="price">650 €</p>
</div>
<div class="product-card">
<img src="images\Adidas\Adidas x Gucci\Adidas x Gucci Wmns Gazelle 'White Green Red'\preview.png" alt="Product 3">
<h3 class="product-title">Adidas x Gucci Wmns Gazelle 'White Green Red'</h3>
<p class="price">575 €</p>
</div>
<div class="product-card">
<img src="images\Adidas\Adidas x Gucci\Gucci x Gazelle 'Pink Velvet'\preview.png" alt="Product 3">
<h3 class="product-title">Gucci x Gazelle 'Pink Velvet'</h3>
<p class="price">650 €</p>
</div>
</div>
</body>
</html>
@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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hovering over grid items does not display the image
Issue with hovering over a button in JavaScript Canvas
CSS DIV Layout over Grid
Javascript grid layout buttons
Having packery grid items have opacity layer over them for hovering
How to highlight the whole button when hovering over CSS Grid item?
Change element's layout when hovering over a menu element
Displaying seperate images on top of background while hovering over grid
Show an image when hovering over a div... but in a x a grid of divs?
Centering a Child Div over a Grid Layout
Related Tags