This is my html document, everythings look good after adding an opacity-50 class for my img tag (I tried to add opacity to other tags and even make my header my img tag sibling but still the problem exists:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/fontawesome-free-6.4.2-web/css/all.css">
<title>Document</title>
<style>
@font-face {
font-family: "Ubunto";
src: url("./fonts/Ubuntu-Medium.ttf");
}
.fo-color{
color: white;
}
</style>
</head>
<body>
<div>
<header class="overflow-hidden text-white fixed">
<div class="grid grid-cols-2 w-screen h-14 bg-slate-600">
<div class="mt-2 ml-6 text-2xl" style="font-family: Ubunto;">Logo</div>
<nav class="flex justify-end ">
<a href="#" class="menu-open-btn absolute mt-3 mr-7">
<i class="fa-solid fa-bars fo-color fa-xl"></i>
</a>
<div class="w-1/3 main-menu duration-300 h-screen bg-slate-600 fixed flex items-center top-0 right-0">
<a href="#" class="menu-close-btn absolute top-4 left-5">
<i class="fa-solid fa-x fa-xl fo-color"></i>
</a>
<ul class="">
<li class="hover:text-lime-600 duration-200 ml-5">Home</li>
<li class="hover:text-lime-600 duration-200 ml-5">About Us</li>
<li class="hover:text-lime-600 duration-200 ml-5">Contact</li>
<li class="hover:text-lime-600 duration-200 ml-5">Team</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="overflow-hidden">
<div class="">
<img src="./img/businesspeople.avif" alt="photo" class="h-auto w-screen bg-indigo-500 opacity-50">
</div>
</div>
</div>
<script>
let main_menu = document.querySelector(".main-menu")
let menu_open_btn = document.querySelector(".menu-open-btn")
let menu_close_btn = document.querySelector(".menu-close-btn")
menu_open_btn.addEventListener("click", () => {
main_menu.classList.remove("translate-x-full")
main_menu.classList.add("translate-x-0")
})
menu_close_btn.addEventListener("click", () => {
main_menu.classList.remove("translate-x-0")
main_menu.classList.add("translate-x-full")
})
</script>
<script src="https://cdn.tailwindcss.com"></script>
</body>
</html>
I have only one img tag that looks fine but as I use opacity it effects everythings and stops them.
Thanks if you can solve my problem.
>Solution :
This is because using opacity with a value other than 1 places the element in a new stacking context. One way to fix it is to adjust the z-index by adding a negative z index such as -z-10 relative on the image.
<img src="./img/businesspeople.avif"
alt="photo" class="h-auto w-screen bg-indigo-500 opacity-50
-z-10 relative">