I have a problem when I hover my article with class="card" name inside my div class="container", it looks like the article overlaps the nav. How do I fix this without removing my transform scale in .card:hover? I want to make it without overlapping with the nav when I hover over it.
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
position: relative;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About<a/></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>If anything is missing from the snippet, you can check my jsfiddle here
What you're experiencing is something referred to as The Stacking Context which, if you think about it from a top-down perspective, is how elements are rendered in the browser. To solve this, you can set the parent element -- in this case the header-container -- to position: relative; and give it a z-index of 1 to override the default of 0. That will elevate it above the card which is using the default of 0 even when hovered.
Here's another good explanation for it as well: https://www.joshwcomeau.com/css/stacking-contexts/
window.onscroll = function() {
myFunction()
};
var navbar = document.querySelector(".myNav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');
* {
text-decoration: none;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: url('/Website/Images/SPY_X_FAMILY.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 200vh;
margin: 0;
padding: 0;
}
.header-container {
margin: 0;
opacity: 0.885;
position: relative;
z-index: 1;
}
.container {
padding: 10px;
background-color: #FFA1C9;
float: left;
width: 75%;
display: flex;
flex-direction: column;
}
nav {
background-color: #F94892;
margin: 0 50px 50px 50px;
border-radius: 5px;
transition: 0.3s;
z-index: 2;
}
nav:hover {
transform: scale(1.005);
transition: 0.3s;
}
nav li {
color: rgb(227, 118, 118);
text-align: center;
padding: 10px;
}
nav ul {
margin-top: 0;
}
nav a {
color: white;
font-family: 'Quicksand';
font-size: 20px;
}
.myHeader {
text-align: center;
background-color: #FFC4C4;
margin: 20px 20px 0 20px;
border-radius: 10px;
padding: 12px;
}
header h1>img {
width: 42%;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 0;
font-family: 'Quicksand';
}
nav a::before {
content: "";
position: absolute;
width: 0;
height: 15px;
background: rgb(182, 1, 32);
bottom: 0;
left: 0;
z-index: -1;
transition: 0.2s linear;
}
nav a:hover::before {
width: 100%;
}
.card {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
transition: 0.2s;
}
.card:hover {
transform: scale(1.0025);
transition: 0.2s;
}
.content-container>h2 {
margin: 10px;
}
/* text font-size */
h2 {
font-size: 2.25em;
color: rgb(212, 27, 58);
font-family: sans-serif;
font-weight: 700;
margin: 20px;
}
p {
font-size: 1.25em;
color: F94892;
}
h3 {
font-size: 1.25em;
color: rgb(212, 27, 58);
}
h1 {
margin: 0;
}
/* image */
.image-style {
text-align: center;
width: 100%;
max-height: 300%;
object-fit: cover;
object-position: center;
}
/* sticky navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
margin: 0;
transition: 0.3s;
transform: scale(1.0025);
z-index: 1;
}
.sticky li {
display: inline-block;
padding-left: 50px;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky+nav {
padding-top: 60px;
}
/* profile things */
.card-v2 {
background-color: #FBE5E5;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v2:hover {
transform: scale(1.0025);
transition: 0.2s;
box-shadow: 0 5px 10px 5px #F94892;
}
.profile {
background-color: #FFA1C9;
padding: 5px;
margin: 0;
float: right;
width: 25%
}
.profile img {
width: 200px;
}
.profile header {
text-align: center;
}
.profile-head {
display: inline;
}
#aside {
background-color: #FFA1C9;
margin: 0;
}
.card-v3 {
background-color: #FFC4C4;
border-radius: 5px;
margin: 1.25em;
padding: 1.25em;
z-index: 0;
}
.card-v3:hover {
box-shadow: 0 4px 8px 8px #efd6d6;
}
/* table */
.table-style {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Problem</title>
</head>
<body>
<header class="header-container header-scroll">
<div class="myHeader">
<h1>
<img src="/Website/Images/Spy_×_Family_logo.png" alt="header">
</h1>
</div>
<nav class="myNav">
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about'>About</a>a></li>
<li><a href='#other'>Other</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<article id="home" class="content-container-column card ">
<h2>Header 2</h2>
<img src="/Website/Images/3774625814.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum architecto culpa ab enim tempora atque corporis nam rem, exercitationem quasi cumque et quam quisquam odio, labore fugit molestias, quo quod?</p>
<p>Lorem</p>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore nisi provident quasi reiciendis odit reprehenderit ut non, voluptatum perspiciatis blanditiis illo a! Rem, recusandae ab commodi provident ex praesentium.</p>
</article>
<article id="about" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/357396304.jpg" class="image-style" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi expedita soluta nihil, praesentium perferendis cum rerum similique ab? Natus saepe molestias reiciendis voluptas voluptatibus consectetur adipisci praesentium asperiores deleniti
odio.
</p>
</article>
<article id="other" class="card content-container-column">
<h2>Header 2</h2>
<img src="/Website/Images/spy-x-family-yor-forger.gif" class="image-style" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores tempora doloribus dicta quibusdam, corrupti quam maiores laboriosam quo voluptatum autem ea ad quaerat id suscipit magnam unde cupiditate, voluptates harum.</p>
</article>
</div>
<aside id="aside" class="profile">
<article class="card-v2">
<header class="profile-head">
<h2>About Me</h2>
<figure class="card-v3">
<img src="/Website/Images/Dwiki_Yulian.jpg" alt="">
</figure>
</header>
<section>
<table class="table-style">
<tr>
<th>Name:</th>
<td></td>
</tr>
<tr>
<th>Tempat, tanggal lahir:</th>
<td></td>
</tr>
<tr>
<th>Alamat:</th>
<td></td>
</tr>
<tr>
<th>Agama:</th>
<td></td>
</tr>
<tr>
</tr>
</table>
</section>
</article>
</aside>
</main>
<script src="muscle.js"></script>
</body>
</html>