Css hover effect won't apply to all linked divs

Community Bug Reporting
#1

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;
}
#2

<center></center> is heavily outdated, and you closed it incorrectly.

and without center, the elements position screw up

I think you need to change and update the layout, then i will look at the image problem with you

How was your intended layout?

1 Like
#3

Tried it too and came to the same conclusion as you: layout needs changing.

#4

with a correct layout, the image very likely work

#5

I fixed it, and kept my layout, i think today’s layout’s are outdated

#6

what do you mean?

Did you at least remove <center></center>? Browser no longer supported, and for all you know, it might break your code within a week

#7

:face_with_raised_eyebrow:

1 Like