Replacing an image when hovering in HTML+CSS

[crispybagel]

Does any1 know how i would be able to overlap a current image with a new one, the new one has the exact same dimensions, only the colors vary.

 

HTML:

<a id="EmailQuickAccess" href="http://images6.fanpop.com/image/photos/37700000/Pewds-Time-pewdiepie-37790853-500-281.png">
  <img id="EmailIcon" src="Email Quickaccess.png" alt="HTML5 Icon">
</a>

CSS:

#EmailIcon {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 8%;
  z-index: 100;

I've seen quite a lot of threads where the picture is taken from an URL instead of a local folder and they use the background-image: url(https://blablablalbal); but since i'm not doing that i dont know how to accomplish this.

[beigedenim]

Put both the images inside the <a> tag, make sure they have the same dimensions, and position:fixed, and use the CSS :hover "function" to toggle the display states of the children on hover of the parent, for example: 

#EmailQuickAccess:hover > #EmailIcon { display:none; }
#EmailQuickAccess:hover > #EmailIcon2 { display:block; }

 

Make sure to hide the second icon's image by default

 

If the second image isn't being shown above the first image, make sure that it has a higher z-index.

[crispybagel]

34 minutes ago, ashzx said:

Put both the images inside the <a> tag, make sure they have the same dimensions, and position:fixed, and use the CSS :hover "function" to toggle the display states of the children on hover of the parent, for example: 

#EmailQuickAccess:hover > #EmailIcon { display:none; }
#EmailQuickAccess:hover > #EmailIcon2 { display:block; }

 

Make sure to hide the second icon's image by default

 

If the second image isn't being shown above the first image, make sure that it has a higher z-index.

Tried doing it that way, instead it displays the new icon above the previous one and hovering doesnt give anything. Did i put the CSS right? I'm very new to coding in general, just started 2 days ago but the 2 new lines in css doesnt follow the same layout when it comes to the {} marks.

 

HTML:

<a id="EmailQuickAccess" href="http://images6.fanpop.com/image/photos/37700000/Pewds-Time-pewdiepie-37790853-500-281.png">
  <img id="EmailIcon" src="Email Quickaccess.png" alt="HTML5 Icon">
  <img id="EmailIcon2" src="Email Quickaccess Hover.png" alt="HTML5 Icon">
</a>

CSS:

#EmailIcon {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 5%;
  z-index: 100;
}
#EmailIcon2 {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 5%;
  z-index: 101;
}
#EmailQuickAccess:hover > #EmailIcon { display:none; }
#EmailQuickAccess:hover > #EmailIcon2 { display:block; }

 

[crispybagel]

Nevermind i solved it, i mistook the z-indexes. now the second image is below the primary one which makes sense.

 

z-index primary =100

z-index hover=99

[beigedenim]

On the EmailIcon2, you should set display:none; in the css, this will cause it to not show until it is hovered.

 

As for the CSS layouting, it doesn't really matter how you place the { and }, just for me I prefer the formatting I showed above.

 

#EmailIcon {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 5%;
  z-index: 100;
}
#EmailIcon2 {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 5%;
  z-index: 101;
display:none;
}
#EmailQuickAccess:hover > #EmailIcon { 
	display:none; 
}
#EmailQuickAccess:hover > #EmailIcon2 { 
	display:block; 
}

 

[crispybagel]

56 minutes ago, ashzx said:

On the EmailIcon2, you should set display:none; in the css, this will cause it to not show until it is hovered.

 

As for the CSS layouting, it doesn't really matter how you place the { and }, just for me I prefer the formatting I showed above.

 

#EmailIcon {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 5%;
  z-index: 100;
}
#EmailIcon2 {
  position: fixed;
  top: 50%;
  width: 125px;
  height: 125px;
  left: 5%;
  z-index: 101;
display:none;
}
#EmailQuickAccess:hover > #EmailIcon { 
	display:none; 
}
#EmailQuickAccess:hover > #EmailIcon2 { 
	display:block; 
}

 

I got the hover effect working properly on all the icons now for the page but i just noticed that a small outer border of the second icon is showing even when not hovering, which makes it look like this. both the icons are the EXACT same size so i really cant figure out why this happens, any idea how to solve?

 

https://pasteboard.co/GArUiIM.png

[beigedenim]

33 minutes ago, Crispybagel said:

I got the hover effect working properly on all the icons now for the page but i just noticed that a small outer border of the second icon is showing even when not hovering, which makes it look like this. both the icons are the EXACT same size so i really cant figure out why this happens, any idea how to solve?

 

https://pasteboard.co/GArUiIM.png

I can't see why that would happen, since the second image should be hidden until it is hovered, double check that the images are actually the same size?