Hi, Guys.
I’m doing the Product Landing Page project and I’ve stumbled upon a situation that I can not understand.
My flex nav bar somehow messes up with img elements in an article container.
I’m gonna try to explain as best as I can.
When I’m scrolling down all the page elements are being hidden behind the nav bar. That’s good, that’s how it supposed to be. Except for a couple of Img elements that stay above the nav bar. These img elements are hyperlinked have opacity(0.8) and hover effect (opacity 1, larger image). When I hover above the img elements, they hide behind the nav bar, but in normal state they stay above it. As you can see in the picture I hover over the balloons image and it hid itself behind the nav, while other elements stay above it. Once I removed the opacity from images of normal state things seemed to be fixed. What is happening here?
I’ll add nav’s and containers html & css here
NAV HTML
<nav id="nav-bar">
<p><u>Gėlių Trobelė</u></p>
<img id="header-img" src="gt.png" alt="Company logo">
<ul>
<li class="nav-link"><a href="index.html">Home</a></li>
<li class="nav-link"><a href="order.html">Order</a>
<ul>
<li><a href="#"> Bouquets</a></li>
<li><a href="#"> Fresh Flower</a></li>
<li><a href="#"> Mens Bouquets</a></li>
<li><a href="#"> Plants</a></li>
</ul>
</li>
<li class="nav-link"><a href="doit.html">Do It Your Self</a></li>
</ul>
</nav>
NAV CSS
nav {
width: 100%;
height: 90px;
background-color: rgb(237, 204, 96, 0.9);
position: fixed;
top: 0;
left: 0;
right: 0;
}
nav p {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 60px;
font-weight: bold;
width: 360px;
height: 64px;
line-height: 45px;
float: left;
padding: 15px 10px;
color: rgb(96,128,237);
}
nav ul {
font-size: 18px;
font-weight: bold;
font-family: fantasy;
background-color: rgb(245, 245, 220, 0.5);
float: right;
border-radius: 5px;
padding: 5px;
margin: 3px 0px 0px 0px;
}
nav ul li {
float: left;
list-style: none;
position: relative;
border-radius: 5px;
}
nav ul li a {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 24px;
font-weight: bold;
padding: 24px 14px;
display: block;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
border-radius: 0px 0px 5px 5px;
}
nav ul li ul li a {
padding: 10px 14px;
}
nav ul li ul li a:hover {
background-color: #323652;
color: white;
}
nav ul li ul li {
width: 200px;
border-radius: 5px;
}
nav ul li:hover {
background-color: #323652;
}
nav ul li a:hover {
color: white;
}
nav ul li:hover ul {
display: block;
CONTAINER HTML
<div id="products">
<p id="prname">Product Range</p>
<p id="flname">Flowers</p>
<p id="bqname">Bouquets</p>
<p id="cdname">Candles</p>
<p id="blname">Balloons</p>
<a id="flowers" href="order.html#fresh">
<img src="flowers.jpg" alt="fresh flowers"></a>
<a id="bouquet" href="order.html#bouq">
<img src="bouquet.jpg" alt="bouquet"></a>
<a id="candle" href="order.html#zvakiutitle">
<img src="candle.jpg" alt="candles"></a>
<a id="balloon" href="order.html#baltitle">
<img src="balloon.jpg" alt="balloons"></a>
</div>
CONTAINER CSS
#products {
border-radius: 20px;
background-color: rgb(237, 204, 96, 0.3);
width: 1200px;
margin: 200px 0px 50px 50px;
display: grid;
grid-template-rows: 100px 50px 200px;
grid-template-columns: 300px 300px 300px 300px;
grid-template-areas: "tit tit tit tit"
"nam nam1 nam2 nam3"
"ic ic1 ic2 ic3";
justify-items: center;
}
#prname {
grid-area: tit;
text-align: center;
font-size: 50px;
}
#flname {
grid-area: nam;
font-size: 29px;
}
#bqname {
grid-area: nam1;
font-size: 29px;
}
#cdname {
grid-area: nam2;
font-size: 29px;
}
#blname {
grid-area: nam3;
font-size: 29px;
}
#products img {
width: 150px;
height: 150px;
border-radius: 10px;
opacity: 0.7;
}
#flowers {
grid-area: ic;
}
#bouquet {
grid-area: ic1;
}
#candle {
grid-area: ic2;
}
#balloon {
grid-area: ic3;
}
#products img:hover {
width: 170px;
height: 170px;
opacity: 1;
}