# How do I make image appear only when hovered?

**URL:** <https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577>\
**Category:** General\
**Created:** [August 16, 2020, 9:55am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577 "2020-08-16T09:55:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![erio](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/erio/32/173833_2.png) [@erio](https://forum.freecodecamp.org/u/erio)\
**Post date:** [August 16, 2020, 9:55am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/1 "2020-08-16T09:55:03Z")

</div>

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](https://codepen.io/zinzc/pen/MWyyjWv)

---

<div class="post-metadata">

**Author:** ![miku86](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miku86/32/95580_2.png) [@miku86](https://forum.freecodecamp.org/u/miku86)\
**Post date:** [August 16, 2020, 10:47am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/2 "2020-08-16T10:47:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![erio](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/erio/32/173833_2.png) [@erio](https://forum.freecodecamp.org/u/erio)\
**Post date:** [August 16, 2020, 10:51am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/3 "2020-08-16T10:51:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![michicko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/michicko/32/134175_2.png) [@michicko](https://forum.freecodecamp.org/u/michicko)\
**Post date:** [August 16, 2020, 11:22am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/4 "2020-08-16T11:22:06Z")

</div>

add this to your css

```auto
#img-born {
  display:none;
}

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

```

---

<div class="post-metadata">

**Author:** ![erio](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/erio/32/173833_2.png) [@erio](https://forum.freecodecamp.org/u/erio)\
**Post date:** [August 16, 2020, 11:45am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/5 "2020-08-16T11:45:56Z")

</div>

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

My code: [https://codepen.io/zinzc/pen/MWyyjWv](https://codepen.io/zinzc/pen/MWyyjWv)

---

<div class="post-metadata">

**Author:** ![michicko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/michicko/32/134175_2.png) [@michicko](https://forum.freecodecamp.org/u/michicko)\
**Post date:** [August 16, 2020, 11:48am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/6 "2020-08-16T11:48:10Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![michicko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/michicko/32/134175_2.png) [@michicko](https://forum.freecodecamp.org/u/michicko)\
**Post date:** [August 16, 2020, 11:49am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/7 "2020-08-16T11:49:38Z")

</div>

it does work. Check if you pasted it correctly.

---

<div class="post-metadata">

**Author:** ![michicko](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/michicko/32/134175_2.png) [@michicko](https://forum.freecodecamp.org/u/michicko)\
**Post date:** [August 16, 2020, 11:50am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/8 "2020-08-16T11:50:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![erio](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/erio/32/173833_2.png) [@erio](https://forum.freecodecamp.org/u/erio)\
**Post date:** [August 16, 2020, 11:55am UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/9 "2020-08-16T11:55:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:43pm UTC](https://forum.freecodecamp.org/t/how-do-i-make-image-appear-only-when-hovered/415577/10 "2021-06-01T18:43:25Z")

</div>