CODEWITHSUNDEEP
htmlcss
BlueHorse
BlueHorse

Reputation: 105

Other images gets mess up when image hover is activated

Taking a break off coding is a mf but here is my thing.

I know this has to do with position property or z index, that be my guess.

But when I mouseover one of my icons, the image of Hillary moves elsewhere.

It would be awesome if something can tell and explain what I am doing wrong.

#wrapper {
	height: 900px;
	width:  900px;
	border: solid black;
    margin-left: auto;
    margin-right: auto;
}
body {
	background-color: #f1f1f1
}
#democraticon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 80px;
   background-repeat: no-repeat;
   width: 100px;
   height: 80px;
   float: right;
   margin-top: 387px;
   margin-right: 320px;
 }
 #democraticon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 120px;
   background-repeat: no-repeat;
   width: 150px;
   height: 120px;

 }

 .republicanicon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 60px;
   width: 100px;
   height: 60px;
   float: left;
   margin-top: 400px;
   margin-left: 320px;
 }
 .republicanicon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 100px;
   background-repeat: no-repeat;
   width: 150px;
   height: 100px;

}
#hillary {
width:40px;
height:40px;
<DOCTYPE html>
<html>
<head>
	<title>2016 Election</title>
</head>
<body>
<div id="wrapper">
<div id="democraticon"></div>
<div class="republicanicon"></div>
<img id="Hillary" src=http://s1.evcdn.com/images/block/I0-001/015/724/220-8.jpeg_/hillary-clinton-20.jpeg/>
</div>

</body>
</html>

Upvotes: 0

Views: 59

Answers (1)

Johannes
Johannes

Reputation: 67738

#democraticon and the .republicanicon are floated elements, one right, one left.

As an <img> element, the #Hillary element is an inline element.

Without hover, both #democraticon and .republicanicon are at the same heigth, so #Hillary goes into the next line, since on that line there is no more space. When you hover over #democraticon or .republicanicon, they become higher and extend downwards, but only one of them. So right of the left-floated #democraticon there now is some space on the same baseline. #Hillary (as an inline element) now is put on that line.

To fix that, put #Hillary into a <div> tag (which is a block element) and assign clear: both to it. In addition, make the hovered elements the same height as their un-hovered versions to avoid the vertical movement of the #Hillary element:

#wrapper {
	height: 900px;
	width:  900px;
	border: solid black;
    margin-left: auto;
    margin-right: auto;
}
body {
	background-color: #f1f1f1
}
#democraticon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 80px;
   background-repeat: no-repeat;
   width: 100px;
   height: 120px;
   float: right;
   margin-top: 387px;
   margin-right: 320px;
 }
 #democraticon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 120px;
   background-repeat: no-repeat;
   width: 150px;
   height: 120px;

 }

 .republicanicon {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 100px 60px;
   background-repeat: no-repeat;
   width: 100px;
   height: 100px;
   float: left;
   margin-top: 400px;
   margin-left: 320px;
 }
 .republicanicon:hover {
   background-image: url("http://www.ck12.org/flx/show/THUMB_POSTCARD/image/user%3AZXBpc2R1c2dvdkBlcGlzZC5vcmc./political_parties.jpg");
   background-size: 150px 100px;
   background-repeat: no-repeat;
   width: 150px;
   height: 100px;

}
#hillarywrapper {
  clear: both;
}
#hillary {
  width:40px;
  height:40px;
}
<DOCTYPE html>
<html>
<head>
	<title>2016 Election</title>
</head>
<body>
<div id="wrapper">
<div id="democraticon"></div>
<div class="republicanicon"></div>
  <div id="hillarywrapper"> 
<img id="Hillary" src="http://s1.evcdn.com/images/block/I0-001/015/724/220-8.jpeg_/hillary-clinton-20.jpeg/">
    </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions