I'm fairly new to web development, so please be patient with me. I am trying to achieve a design where my image links are displayed at half opacity by default and then switch to full opacity when hovered over. While this is working as intended, it seems to cause issues with the fixed navbar located at the top of my page.
When I scroll down and the image links get positioned beneath the navbar, the navbar itself also becomes semi-transparent. However, upon hovering over the image links, they correctly become fully opaque and appear as if they are under the navbar.
Below is the CSS code I have used:
.navbar{
background-color: #50394c;
align-items: right;
width: 100%;
height: 60px;
position:fixed;
top:0;
}
#container a:link{opacity:.5;}
#container a:hover{opacity:1;}
#container{
display:grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
grid-gap: 15px;
padding:20px;
justify-content: center;
align-content: center;
}
In my HTML, I have set an ID for the container which holds all the links and images.
No matter where I apply the opacity setting (on individual image elements, the div class, as a link decoration, etc.), it continues to affect the navbar when the element intersects with it during scrolling.