0
258
Viewsreact card not displaying background
Ive added an animation in CSS, the idea is that when i hover over an image of food it shows me its details as shown:
but when i add a part of css animation code , the card's background becomes transparent.
if i remove the following code it shows the result as described in 1st image, writing this results in 2nd image
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:2400px;
display:block;
}
Rest of code is uploaded on Github https://github.com/mareyam/Maryam-s-Restaurant
1 answers
Answer question0
There is a problem with the z-index values, since your Restaurant component is not a children of your App component. The img components have a z-index of 999, that's why you can see the menu images. But the detail block below doesn't. You can solve it by adding the following CSS rule:
.container-fluid {
z-index: 4;
}
However I recommend avoid using too much z-index, it's very hard to maintain. Always try to solve that kind of issue with a proper nesting of your components.