How do I make image appear only when hovered?

1

I want the image of Brian May as a baby to sonly show when the list item “Brian May was born” is hovered. How do I do this?

Link to my code so far: https://codepen.io/zinzc/pen/MWyyjWv

2

Hey there,

you can do this with JavaScript.

If you are already familiar with it,
you can do something like this:

  1. Add both images
  2. Make the baby image invisible/hidden
  3. When you hover over the desired line, make the baby image visible/unhidden and the adult image invisible/hidden
1 Like
3

I’m not that familiar with Javascript yet. Is there any way to do this in pure HTML and CSS? Or do you reccomend that I expand my knowledge about JavaScript before I attempt making something like this?

4

add this to your css

#img-born {
  display:none;
}

#born:hover + #img-born{
display: block;
}
2 Likes
5

@michicko It doesn’t seem to work. Am I doing it wrong?

My code: https://codepen.io/zinzc/pen/MWyyjWv

6

You’re welcome. You should learn more about these selectors. it can be really useful. I’m still trying to figure them out. “+”, “>”, “&” and more…

1 Like
7

it does work. Check if you pasted it correctly.

1 Like
8

Sorry, i think you’re missing the id selector. It is supposed to be
“#born:hover + #img-born” and not “#born:hover + img-born”

1 Like
9

Thank you so much! :grin:
I forgot to put the id selector, like you said. Your solution is exactly what I was looking for. Again, thank you!

1 Like