Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible.
Here's my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header id="header">
<h1>BluShop</h1>
</header>
<section id="leftContent">
<div id="pacificrimContent">
<h2>Pacific Rim</h2>
<img alt="pacificrim image" src="../bilder/pacificRim.jpg">
<p>Blahblahblah</p>
</div>
<div id="startrekContent">
<h2>Star Trek</h2>
<img alt="startrek image" src="../bilder/starTrek.jpg">
<p>blahblahblah</p>
</div>
<div id="worldwarzContent">
<h2>World War Z</h2>
<img alt="worldwarz image" src="../bilder/worldWarZ.jpg">
<p>blahblahblah</p>
</div>
</section>
<aside id="rightContent">
<div id="pacificrimPoster">
<a href="#pacificrimContent"><img alt="pacificrim poster" src="../bilder/pacificRim.jpg"></a>
</div>
<div id="startrekPoster">
<a href="#startrekContent"><img alt="startrek poster" src="../bilder/starTrek.jpg"></a>
</div>
<div id="worldwarzPoster">
<a href="#worldwarzContent"><img alt="worldwarz poster" src="../bilder/worldWarZ.jpg"></a>
</div>
</aside>
<footer id="footer">
</footer>
</div>
</body>
</html>
The CSS code
@charset "utf-8";
/* CSS Document */
body{
margin: 0;
}
#container{
width: 960px;
height: 600px;
margin: auto;
background-color: rgb(78, 80, 85);
border: solid 1px rgb(213, 214, 215);
}
#header{
height: 60px;
background-color: rgb(66, 69, 74);
margin-bottom: 10px;
}
#header h1{
float: left;
margin: 0px 10px 0px 10px;
color: rgb(14, 177, 238);
}
#leftContent{
float: left;
position: relative;
margin: 0px 10px 10px 10px;;
height: 460px;
width: 780px;
background-color: rgb(230, 231, 232);
}
#leftContent h2{
font-size: 20px;
margin: 10px 0px 0px 10px;
}
#leftContent img{
float: left;
margin: 0px 20px 10px 10px;
width: 310px;
height: 420px;
}
#leftContent p{
margin: -4px 20px 10px 0px;
}
#pacificrimContent, #startrekContent, #worldwarzContent{
position: absolute;
overflow: hidden;
transition: height .5s ease-in;
-webkit-transition: height .5s ease-in;
-moz-transition: height .5s ease-in;
}
#startrekContent, #worldwarzContent{
z-index: -1;
height: 0;
}
#rightContent{
float: right;
width: 140px;
height: 460px;
margin: 0px 10px 10px 10px;
background-color: rgb(230, 231, 232);
}
#rightContent img{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 20px
}
#pacificrimContent:target, #startrekContent:target, #worldwarzContent:target{
height: 100%;
z-index: 10;
}
#footer{
height: 60px;
margin: 0;
background-color: rgb(16, 163, 210);
clear: both;
}
Desiring Pacific Rim to always be visible initially on the website and having others appear when targeted. Currently facing an issue where Pacific Rim remains consistently visible in the background during transitions between Star Trek and World War Z.
Since JavaScript usage is restricted, seeking alternative methods to resolve this challenge. Appreciate any insights or suggestions!
Explore the issue further at jsfiddle.net/f8ns4 - JSFiddle demonstration available!