Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Replacing an image when hovering in HTML+CSS

crispybagel
 Share

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.

Link to comment
Share on other sites

Link to post
Share on other sites

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.

Link to comment
Share on other sites

Link to post
Share on other sites

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

 

Link to comment
Share on other sites

Link to post
Share on other sites

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

 

Link to comment
Share on other sites

Link to post
Share on other sites

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

Link to comment
Share on other sites

Link to post
Share on other sites

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?

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×