I am pretty new to coding. I am writing my first Kirby Website. I have a fixed top bar and a scrollable gallery. I tried to have my images to be B/W on hover. This works, but for some reason - when hovering over the image - the image will suddenly overlap the fixed top bar. Why is this happening and what can I do?
I tried solving it with z-index but it did not work. Maybe my css is to messy? Like I said - I am just starting out and did a lot of it by trial and error.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?></title>
<?= css('index.css') ?>
</head>
</head>
<body>
<header>
<div class="left">
<div class="fixed">
<div class="logo">
<a href="<?= $site->url() ?>"><?= $site->title() ?></a>
<a class="sublogo"> Sound Design | Composing | Post Produktion </a>
</div>
</div>
</div>
</header>
<div class="flexbox">
<div class="left">
<div class="fixed">
<nav class="menu" id="menu" >
<?php
// get the first set of subpages which should be used
$subpages = $pages->find('projects')->children();
// create the snippet beginning with those subpages
snippet('treemenu', ['subpages' => $subpages]);
?>
</nav>
<nav class="menu" id="menu2" >
<?php foreach ($site->children()->listed() as $subpage): ?>
<a href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a>
<?php endforeach ?>
</nav>
</div>
</div>
<div class="right">
<ul class="projects">
<?php foreach ($page->children()->listed() as $project): ?>
<li>
<div>
<a href="<?= $project->url() ?>">
<?= $project->image()->crop(500) ?>
</a>
</div>
</li>
<?php endforeach ?>
</ul>
</div>
</div>
</body>
</body>
</body>
</html>
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
html {
height: 100%;
overflow: hidden;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}
body {
background-color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
word-wrap: break-word;
overflow: auto;
}
a {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
/*Helps With Images*/
img, video {
width:100%;
height:auto;
}
img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
li {
list-style-type: none;
}
.logo {
background-color: white;
overflow: hidden;
position: fixed;
float: left;
display: block;
padding-top: 3%;
top: 0;
padding-bottom: 3%;
width: 100%;
margin: 0% 1%;
font-size: 18px;
font-weight: bold;
/* border-bottom: 0.125vw solid #000000; */
}
.sublogo {
flex-basis: auto;
margin-left: 85px;
font-size: 18px;
font-weight: normal;
}
.menu {
line-height: 150%;
font-size: 16px;
color: black;
}
#menu {
/* text-decoration: underline; */
width: 70%;
margin: 0% 5%;
}
#menu2 {
width: 5%;
margin-bottom: 30px;
margin-left : 15px;
position: fixed;
bottom: 0;
}
a:hover {
font-style: italic;
text-decoration: underline;
}
a.logo:hover {
font-style: normal;
text-decoration: none;
}
a.sublogo:hover {
font-style: normal;
text-decoration: none;
}
.projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
width: 95%;
grid-gap: 0.2rem;
margin-top: 3.5%;
margin-left: 11%;
}
ul.gallery {
width: 80%;
padding: 0% 10% 0% 10%;
}
.flexbox {
display: flex;
width: 100%;
height: 100vh;
}
.left {
flex-basis: auto;
width: 12%;
padding: 2rem;
/* border-right: 0.125vw solid #a6a6a6; */
}
.right {
width: 80%;
}
.fixed {
position: fixed;
}
Why is this happening?
As per the CSS specification for filter:
A computed value of other than
noneresults in the creation of a stacking context […]
And as per the CSS specification for the paint order of elements, elements with the same z-index within the same stacking will be painted on top of each other in "tree order" – the order they appear in the HTML code. Since the images appear later than the top bar, the images will overlay the top bar.
what can I do?
Increase the z-index of the top bar element:
.fixed {
…
z-index: 1;
}
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
html {
height: 100%;
overflow: hidden;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
body {
background-color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
word-wrap: break-word;
overflow: auto;
}
a {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
/*Helps With Images*/
img,
video {
width: 100%;
height: auto;
}
img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
li {
list-style-type: none;
}
.logo {
background-color: white;
overflow: hidden;
position: fixed;
float: left;
display: block;
padding-top: 3%;
top: 0;
padding-bottom: 3%;
width: 100%;
margin: 0% 1%;
font-size: 18px;
font-weight: bold;
/* border-bottom: 0.125vw solid #000000; */
}
.sublogo {
flex-basis: auto;
margin-left: 85px;
font-size: 18px;
font-weight: normal;
}
.menu {
line-height: 150%;
font-size: 16px;
color: black;
}
#menu {
/* text-decoration: underline; */
width: 70%;
margin: 0% 5%;
}
#menu2 {
width: 5%;
margin-bottom: 30px;
margin-left: 15px;
position: fixed;
bottom: 0;
}
a:hover {
font-style: italic;
text-decoration: underline;
}
a.logo:hover {
font-style: normal;
text-decoration: none;
}
a.sublogo:hover {
font-style: normal;
text-decoration: none;
}
.projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
list-style: none;
width: 95%;
grid-gap: 0.2rem;
margin-top: 3.5%;
margin-left: 11%;
}
ul.gallery {
width: 80%;
padding: 0% 10% 0% 10%;
}
.flexbox {
display: flex;
width: 100%;
height: 100vh;
}
.left {
flex-basis: auto;
width: 12%;
padding: 2rem;
/* border-right: 0.125vw solid #a6a6a6; */
}
.right {
width: 80%;
}
.fixed {
position: fixed;
z-index: 1;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>
<body>
<header>
<div class="left">
<div class="fixed">
<div class="logo">
<a href=""><?= $site->title() ?></a>
<a class="sublogo"> Sound Design | Composing | Post Produktion </a>
</div>
</div>
</div>
</header>
<div class="flexbox">
<div class="left">
<div class="fixed">
<nav class="menu" id="menu">
</nav>
<nav class="menu" id="menu2">
<a href=""><?= $subpage->title() ?></a>
</nav>
</div>
</div>
<div class="right">
<ul class="projects">
<li>
<div>
<a href="<?= $project->url() ?>">
<img src="https://picsum.photos/500/500" width="500" height="500"/>
</a>
<a href="<?= $project->url() ?>">
<img src="https://picsum.photos/500/500" width="500" height="500"/>
</a>
<a href="<?= $project->url() ?>">
<img src="https://picsum.photos/500/500" width="500" height="500"/>
</a>
<a href="<?= $project->url() ?>">
<img src="https://picsum.photos/500/500" width="500" height="500"/>
</a>
</div>
</li>
</ul>
</div>
</div>
</body>
</body>
</body>
</html>