Hi guys, i’ve been working on this website for the past 12 hours and i’ve hit a brick wall, i have four div’s which act as my navigation menu, the hover effects for the div’s worked perfectly fine before i added an anchor tag to them, since then two suddenly stopped working and i can’t figure out why. I originally learned HTML and CSS from Codecademy several years ago and i have faith that someone here can help me out
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="banner.png" type="image/x-icon"/>
<title>Narutoverse</title>
</head>
<body>
<div id="div1">
<center><img src="banner.png"/><center/>
<a href="naruto.html"><div id="naruto"></div></a>
<a href="naruto-shippuden.html"><div id="naruto-shippuden"></div></a>
<a href="boruto.html"><div id="boruto"></div></a>
<a href="movies.html"><div id="movies"></div></a>
</div>
</body>
CSS
body
{
background-image: url("background.png");
background-size: 100%;
max-width: 100%;
overflow-x: hidden;
}
#banner
{
width: 101.1%;
margin-left: -0.1em;
margin-top: -1em;
border-bottom: 3px outset #ff5100;
border-radius: 10px;
text-align: center;
color: #ffff00;
font-size: 5em;
padding-bottom: 0.1em;
z-index: 1;
}
#logo
{
width: 30%;
height: 20%;
z-index: -1;
}
#naruto
{
height: 20em;
width: 20em;
background-image: url("naruto.png");
background-size: 75%;
background-repeat: no-repeat;
background-position: 2.5em, 0em, 0em, 0em;
border: 0.2em solid #000000;
border-radius: 100%;
margin-left: -50em;
-webkit-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
-moz-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
}
#naruto:hover
{
background-image: url("narutochange.png");
background-size: 75%;
transition: all 0.5s ease-in-out;
}
#naruto-shippuden
{
height: 20em;
width: 20em;
background-image: url("naruto-shippuden.png");
background-size: 75%;
background-repeat: no-repeat;
background-position: 2.5em, 0em, 0em, 0em;
border: 0.2em solid #000000;
border-radius: 100%;
margin-right: -50em;
margin-top: -21em;
-webkit-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
-moz-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
}
#naruto-shippuden:hover
{
background-image: url("naruto-shippudenchange.png");
background-size: 75%;
transition: all 0.5s ease-in-out;
}
#boruto
{
height: 20em;
width: 20em;
background-image: url("boruto.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: top right;
border: 0.2em solid #000000;
border-radius: 100%;
margin-left: -50em;
margin-top: 10em;
-webkit-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
-moz-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
}
#boruto:hover
{
background-image: url("borutochange.png");
background-position: center;
transition: all 0.5s ease-in-out;
}
#movies
{
height: 20em;
width: 20em;
background-image: url("movies.png");
background-size: 95%;
background-repeat: no-repeat;
background-position: 6.5em, 0em, 0em, 0em;
border: 0.2em solid #000000;
border-radius: 100%;
margin-right: -50em;
margin-top: -20.4em;
-webkit-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
-moz-box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
box-shadow: inset -2px 1px 14px 5px rgba(0,0,0,1);
}
#movies:hover
{
background-image: url("movieschange.png");
background-size: 75%;
background-position: 2.5em, 0em, 0em, 0em;
transition: all 0.5s ease-in-out;
}
