Reputation: 17
I am trying to follow this tutorial for a web development class. The idea is to have a different background image ease in to the container while hovering on the nav links. The background images ease in like they are supposed to, however the static background image is not appearing. I have been pouring over the code for hours to see what I did differently, but I cannot find the problem.
Here is the tutorial I am following
Here is my CSS:
* {
margin: 0; padding: 0;
}
nav {
width: 170px; height: 500px;
background-color: #ffffff;
border: #000000 3px;
}
.wrapper {
position: relative;
overflow: hidden;
margin: 100px auto;
width: 800px;
height: 500px;/*CHECK*/
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}
.wrapper img {
position: absolute;
top: 0; left: 0;
z-index: -60;/*makes nav images come in on top of static background image*/
}
.wrapper li img {
position: absolute;
top: 0; left: 800px;
z-index: -50;/*makes static background stay behind nav images*/
transition: all 3s ease; /*experiment*/
}
ul {
width:800px; height: 500px;
list-style: none;
}
li a {
z-index: 1;
display: block;
padding-left: 20px;
width: 150px;
height: 30px;
background: white;
color: #444;
text-decoration: none;
font: 14px/30px Helvetica, Verdana, sans-serif;
}
li:nth-child(1) {
padding-top: 50px;
}
li a:hover {
background: #eee;
}
li a:hover + img {
left: 0px;
}
body {
background-color: #ffffff;
}
<div class="wrapper"><!--DIV SEPARATES NAV SECTION-->
<nav>
<h1>PAGE TITLE</h1>
<ul>
<li>
<a href="index.html">Home</a>
<img src="images/nav/fit/home.jpg" alt="">
</li>
<li>
<a href="afghan.html">Afghanistan</a>
<img src="images/nav/fit/afghan.jpg" alt="">
</li>
<li>
<a href="libya.html">Libya</a>
<img src="images/nav/fit/libya.jpg" alt="">
</li>
<li>
<a href="oki.html">Okinawa</a>
<img src="images/nav/fit/oki.jpg" alt="">
</li>
<li>
<a href="korea.html">Korea</a>
<img src="images/nav/fit/korea.jpg" alt="">
</li>
</ul>
</nav>
<img src="image/nav/fit/home.jpg" alt=""><!--STATIC BACKGROUND IMAGE-->
</div>
Any help or suggestions would be appreciated. Much Thanks
Upvotes: 2
Views: 84
Reputation: 6759
Your code is on right track. The problem is on your image path. Check the following fiddle which I replace your image path with the designshack images. Check the following link to understand more of file paths.
<img src="picture.jpg">
picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from the current folder
* {
margin: 0; padding: 0;
}
nav {
width: 170px; height: 500px;
background-color: #ffffff;
border: #000000 3px;
}
.wrapper {
position: relative;
overflow: hidden;
margin: 100px auto;
width: 800px;
height: 500px;/*CHECK*/
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}
.wrapper img {
position: absolute;
top: 0; left: 0;
z-index: -60;/*makes nav images come in on top of static background image*/
}
.wrapper li img {
position: absolute;
top: 0; left: 800px;
z-index: -50;/*makes static background stay behind nav images*/
transition: all 3s ease; /*experiment*/
}
ul {
width:800px; height: 500px;
list-style: none;
}
li a {
z-index: 1;
display: block;
padding-left: 20px;
width: 150px;
height: 30px;
background: white;
color: #444;
text-decoration: none;
font: 14px/30px Helvetica, Verdana, sans-serif;
}
li:nth-child(1) {
padding-top: 50px;
}
li a:hover {
background: #eee;
}
li a:hover + img {
left: 0px;
}
body {
background-color: #ffffff;
}
<div class="wrapper"><!--DIV SEPARATES NAV SECTION-->
<nav>
<h1>PAGE TITLE</h1>
<ul>
<li>
<a href="index.html">Home</a>
<img src="https://designshack.net/tutorialexamples/navpics/pic1.jpg" alt="">
</li>
<li>
<a href="afghan.html">Afghanistan</a>
<img src="https://designshack.net/tutorialexamples/navpics/pic2.jpg" alt="">
</li>
<li>
<a href="libya.html">Libya</a>
<img src="https://designshack.net/tutorialexamples/navpics/pic3.jpg" alt="">
</li>
<li>
<a href="oki.html">Okinawa</a>
<img src="https://designshack.net/tutorialexamples/navpics/pic4.jpg" alt="">
</li>
<li>
<a href="korea.html">Korea</a>
<img src="https://designshack.net/tutorialexamples/navpics/pic5.jpg" alt="">
</li>
</ul>
</nav>
<img src="https://designshack.net/tutorialexamples/navpics/pic1.jpg" alt=""><!--STATIC BACKGROUND IMAGE-->
</div>
Upvotes: 2