Help with :hover

HTML-CSS
1

Hi,
I’m trying to make the CodeCamp Tribute page, can you help me figure out why is my #image-4:hover not working?
I want it to switch to the other image when hovered . But using CSS instead of HTML onmouseover.
why is it not working?
There’s a link to my pen .
Thank you.

2

ok, so here is what’s happening:
you have an img element with a src pointing to an img
that displays the image on your webpage
great! that works as expected

then in your css you set a background img
but your img tag already has a src
so it doesn’t display

the best way to do this without JS is

  1. create a container div that is the size you want to display your img (you will have to give it width and height bc it will not actually have any content
  2. do not put an img element in the container div
  3. in your css, give the container div a background img
  4. in your css, set the new bg img on hover

hope that helps!

1 Like
3

YES!!! OHMYDAYS!!! IT WORKS. :smile: :smile:
Thank you so much.

1 Like