Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 elements or anything below them. The issue seems to be isolated to the portfolio.html file, as the header displays properly over other images. This problem has been driving me crazy! https://github.com/alil0rphan/Basic-Portfolio

/* Eastablish body parameters */
body {
background-image: url("../images/circlesbg.png");
background-color: #D7CFC3;
color: #777777;
margin: 0px auto;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
/* Create Heading block */
h1 {
background-color: #4AAAA5;
display: inline-block;
padding: 25px 20px 0px 20px;
height: 55px;
margin: 0px auto;
font-family: "Georgia", Times, "Times New Roman", serif;
color: #FFFFFF;
font-size: 36px;
}
h1,
h2,
h3 {
font-weight: bold;
}
section {
background-color: #ffffff;
}
/*Establishes header on top */
header {
background-color: #FFFFFF;
border-bottom: solid 2px #cccccc;
margin: 0px auto;
width: 100%;
height: 80px;
top: 0px;
position: fixed;
z-index: 99;
}
/* establishes tranparency on scroll */
body.scrolled #main-menu {
opacity: 0.2;
transition: opacity .2s;
z-index: 98;
}
body.scrolled #main-menu:hover {
opacity: 1.0;
transition: opacity .2s;
z-index: 97;
}
/* Makes sure heading and contents line up */
.banner {
width: 960px;
margin: 0px auto;
height: 60px;
position: relative;
}
/* Navigational link parameters established */
.link-box {
padding: 30px 0px 0px 20px;
height: 55px;
right: 0px;
display: inline;
position: absolute;
}
/* Establishes main content parameters (container and connect blocks) */
.content {
width: 960px;
margin: 0px auto;
}
/* Establish main unique block on each page */
.container {
width: 590px;
border: solid 2px #dddddd;
float: left;
margin: 115px 0px 200px 0px;
padding: 30px;
}
/* Link attributes including hover */
a {
color: #777777;
text-decoration: none;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
word-spacing: 10px;
}
a:hover {
color: #4AAAA5;
}
/* Establishing heading fonts  for container and connect box*/
h2 {
color: #4AAAA5;
font-family: "Georgia", Times, "Times New Roman", serif;
border-bottom: solid 3px #dddddd;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 32px;
}
h3 {
color: #4AAAA5;
font-family: "Georgia", Times, "Times New Roman", serif;
border-bottom: solid 1px #dddddd;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 24px;
}
/* adjusts line height and paragraphs for the about me section */
p {
line-height: 2.5;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
margin-top: 0px;
color: #777777;
}
/* My picture on the index file */
#face {
float: left;
display: inline;
margin-top: 10px;
margin-right: 15px;
width: 250px;
}
/* Connections box parameters with icons */
.connect {
width: 210px;
border: solid 2px #dddddd;
float: right;
margin-top: 115px;
padding: 30px;
}
/* Establish icon aesthetics and behaviors with hover features */
.icons {
display: inline-block;
margin: 0px 5px 30px 0px;
width: 60px;
height: 60px;
}
.icons:hover {
box-shadow: 4px 4px 2px #4AAAA5;
}
/* cat pictures and parameters established with hover features*/
.cats {
display: inline-block;
margin: 10px 40px 40px 0px;
width: 230px;
}
.cats:hover {
box-shadow: 4px 4px 2px #4AAAA5;
}
.image { 
   position: relative; 
   display: inline-block;
}
/* establishes parameters for banners over the cat images */
h4 { 
   position: absolute; 
   width: 230px;
   background-color: #4AAAA5;
   color: #FFFFFF;
   font-family: "Georgia", Times, "Times New Roman", serif;
   text-align: center;
   padding: 10px 0px 10px 0px;
   margin: auto;
   left: 0px;
   bottom: 50px;
}
/* Establishes sticky footer */
footer {
background-color: #666666;
opacity: 0.85;
text-align: center;
border-top: solid 6px #4AAAA5;
position: fixed;
width: 100%;
bottom: 0px;
padding-top: 30px;
padding-bottom: 30px;
color: #BFBEBC;
font-size: 10px;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* Establishes input attributes for the contact/ message form. */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px; 
    border: 2px solid #DDDDDD;
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-bottom: 16px; 
    resize: vertical
}
input[type=submit] {
    background-color: #4AAAA5;
    color: #FFFFFF;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}
/* Makes the Submit button change color when mouse hovers over */
input[type=submit]:hover {
    background-color: #666666;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: #666666;
    opacity: 0.5 !important;
}
label {
color: #8F7E7F;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8>";
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<div id="main-menu">
<header>
<div class="banner">
<h1>John Bendfeldt</h1>
<!-- Navigational links. -->
<div class="link-box">
<a href="index.html">About | </a>
<a href="portfolio.html">Porfolio | </a>
<a href="contact.html">Contact</a>
</div>
</div>
</header>
</div>
<body>
<div class="content">
<!-- Big content box in middle-->
<section class="container">
<h2>Portfolio</h2>
<br>
<!-- Images for the main content block -->
<div class="image">
<img src="assets/images/cat1.jpg" class="cats" alt="kitten">
<h4>Building Websites</h4>
</div>
<div class="image">
<img src="assets/images/cat2.jpg" class="cats" alt="kitten">
<h4>RPG</h4>
</div>
<div class="image">
<img src="assets/images/cat3.jpg" class="cats" alt="kitten">
<h4>Trivia Game</h4>
</div>
<div class="image">
<img src="assets/images/cat4.jpg" class="cats" alt="kitten">
<h4>Rock Paper Scissors</h4>
</div>
<div class="image">
<img src="assets/images/cat5.jpg" class="cats" alt="kitten">
<h4>American Freedom</h4>
</div>
</section>
<!-- connect with me box -->
<section class="connect">
<h3>Connect with Me</h3>
<br>
<a href="https://github.com/alil0rphan" target="_blank"><img src="assets/images/Github-icon.png" class="icons" alt="Github-icon" title="GitHub"></a>
<a href="https://www.linkedin.com/in/john-bendfeldt-b32736130/" target="_blank"><img src="assets/images/linkedin-icon.png" class="icons" alt="linkedin-icon" title="LinkedIn"></a>
<a href="http://stackoverflow.com/users/7700030/john-bendfeldt" target="_blank"><img src="assets/images/stackoverflow-icon.png" class="icons" alt="stackoverflow-icon" title="Stackoverflow"></a>
</section>
</div>
</body>
<footer>
© Copywrite 2017 John Bendfeldt
</footer>
<!-- makes the header transparent on scroll -->
<script type="text/javascript">
window.addEventListener('scroll', function () {
  document.body.classList[
    window.scrollY > 20 ? 'add': 'remove'
  ]('scrolled');
});
</script>
</html>

`

htmlcss

Answer №1

One solution could be to include the CSS property position: absolute; within the selector body.scrolled #main-menu. When implemented, it will result in the following styling:

body.scrolled #main-menu {
    opacity: 0.5;
    transition: opacity .3s;
    z-index: 100;
    position: absolute;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for applying this specific style to a certain element?

Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...

cssangulartypescript

What is the best way to insert hyperlinks within every cell of a table using Angular?

I am currently working on a table created with ng-repeat in Angular. The cells are populated by variables in the scope. <tbody> <tr ng-repeat="item in items" myDirective> <td>{{item.title}}</td> <td>{{item.field}}&l ...

javascripthtmlangularjs

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

javascriptjqueryhtmlcss

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

htmlcssreactjs

Unable to alter fxFlex property within Component using "setAttribute('fxFlex', '25%')" does not function properly in Angular 6

Currently, I am utilizing the flexLayout module to create responsive divs in my Angular application. You can find more information about flexLayout at https://github.com/angular/flex-layout and also at https://alligator.io/angular/flex-layout/. const nav ...

htmlangulartypescriptfrontendangular-flex-layout

What is the problem with locating elements in Selenium with Java?

I've been encountering difficulties in finding elements on a webpage structured like this: <tr id="filter100" style="...." idx=0 <td> <div onclick=... style=... <table dir = "fil"> <tbody> ...

javacssseleniumlocate

CSS Opacity Issue

Why is the article transparent? Despite my efforts to search online for similar instances, I am surprised at not finding anything and feeling quite puzzled about what steps to take next. body { background-color: #000000; opacity: 0.8; background-i ...

htmlcss

The directory for foundation images cannot be found

Currently, I am in the process of learning Foundation framework and I have encountered some issues with my code. My goal is to display images for different devices such as mobile, tablet, and desktop. However, despite double-checking the path to the images ...

htmlzurb-foundation

Tips on showcasing array elements within a table's tbody section and including several values within the same array

I am struggling to figure out how to display array values in my table rows that I receive from input values. I have created an array, but I can't seem to find a way to display them in the table. Furthermore, I want to be able to add more values to th ...

javascripthtmlarraysformshtml-table

Angular: Disabling a button based on an empty datepicker selection

Can anyone help me figure out how to disable a button when the datepicker value is empty? I've tried using ngIf to check if the datepicker is empty and then disable the button, but it's not working. My goal is to make the button unclickable if th ...

javascripthtmlangulartypescript

How can I obtain live subprocess output updates?

I am attempting to execute the "tail - f" command on the server to receive real-time output displayed on this HTML page. However, I have not been successful in achieving this and only simple output commands are being displayed instantly. How can I utilize ...

pythonhtmllinuxflask

Implementing CSS and HTML in Email Communication

I'm noticing a difference between how this appears in a browser versus an email. The text on the image looks perfect when viewed on Mozilla/Chrome, but when I use the same code in an email, the text ends up displaced below the image (right beneath it) ...

htmlcssemail

When using jQuery with a large selectbox, you may encounter the error message: "Uncaught RangeError: Maximum

My select box works fine in IE and Mozilla, but throws an uncaught rangeError in Chrome when choosing the "Others" option to display a second select box with over 10k options. How can I diagnose and resolve this issue? <!DOCTYPE html> ...

javascriptjqueryhtmlgoogle-chromedrop-down-menu

Tips for dynamically resizing the content area using CSS without the need for javascript

What I need is as follows: The blue area should resize when the browser window resizes. The header must be visible at all times. The blue area should start right after the header ends, not overlapping or appearing above it. The blue area should end befor ...

htmlcss

The database server is not appearing on the main.js page of the client

My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the ...

javascripthtmlexpressvite

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

htmlcss

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

javascripthtmlcss

My ng-view html is unexpectedly displaying as plain string. What steps should I take to resolve this issue?

Why is my ng-view HTML displaying as plain text? How can I resolve this issue? I have encountered an error, here is the screenshot for reference: Unfortunately, I am unable to upload images at the moment. ...

javascripthtmlangularjshaml

The jQuery html function may encounter issues when used in Chrome browser

Can someone help me figure out why this code isn't functioning properly in Chrome, even though it works fine in Safari? I've been searching for a solution but haven't had any luck! jQuery.noConflict(); jQuery(document).ready(function() { ...

jqueryhtmlgoogle-chrome

The way in which the DOM responds to adding or deleting elements from its structure

My typical method for displaying a popup involves adding an empty div tag and a button to the webpage: <div id="popupDiv"></div> <input type="button" id="popupButton" /> I then use jQuery to handle a button click event, make an ajax cal ...

javascriptjqueryhtmldom