Throughout this question, I will be using the following Codepen as a reference: https://codepen.io/zarif-codes/pen/OJOBmLV
In my project for creating a product landing page (an FCC assignment), I've implemented a fixed navbar. Below is the HTML code for the navbar:
<header id="header">
<div id="center">
<div id="brand-id">
<img src="https://cdn-icons-png.flaticon.com/512/776/776588.png" alt="truck icon" id="header-img">
<p>FastDel</p>
</div>
<nav id="nav-bar">
<a href="#features" class="nav-link">Features</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#how-to" class="nav-link">How it works</a>
</nav>
</div>
Here is the CSS styling for the navbar:
#header {
box-shadow: 0px 3px 10px;
background: rgb(0,9,36);
background: linear-gradient(
90deg,
rgba(0,9,36,1) 0%,
rgba(9,121,107,1) 62%,
rgba(0,91,255,1) 100%);
position: fixed;
top: 0;
width: 100vw;
}
As you scroll down the webpage, you'll come across a 'Features' section which contains 3 cards with hover effects. Here's the CSS for these cards:
#features {
display: flex;
justify-content: space-around;
}
.feature {
width: 28vw;
border-radius: 1rem;
box-shadow: 2.5px 5px 10px 0.1px;
padding: 10px;
display: grid;
grid-template-columns: 1fr 2fr;
font-size: 1.25vw;
}
.feature p{
grid-column-start: 1;
grid-column-end: 3;
}
.feature img {
width: 6vw;
}
.feature:hover{
animation-name: scale-big;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
The issue I'm facing is that when scrolling down and the navbar overlaps the cards, hovering over the cards reveals the text through the navbar, making it appear transparent. How can I resolve this problem?