Display images when hovering over another image

Question

I have an image and a list that contains images, what i want to do is when i hover on the first image the list appears, how can i do that using css? here is my code:

ul{
display: none
}

.hoveroverme:hover{
ul{
display:block
}
}

<img src="http://placehold.it/350x150" class="hoveroverme">

<ul class="list-inline list-unstyled">
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50"></li>
<li><img src="http://placehold.it/50x50"></li>
</ul>

Possible duplicate of [How to affect other elements when a div is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Rob, May 27 '17 at 21:56

score 1 · Accepted Answer · answered May 27 '17 at 21:29

You're looking for a sibling selector. In this case, you can use either the adjacent sibling selector (+), or general sibling selector (~).

ul {
  display: none
}

.hoveroverme:hover + ul {
  display: block
}

<img src="http://placehold.it/350x150" class="hoveroverme">

<ul class="list-inline list-unstyled">
  <li><img src="http://placehold.it/50x50"></li>
  <li><img src="http://placehold.it/50x50"></li>
  <li><img src="http://placehold.it/50x50"></li>
</ul>

score 1 · Answer 2 · answered May 27 '17 at 21:30

You should use sibling selector here + or ~

ul{
display: none
}

.hoveroverme:hover ~ ul{
display:block
}

+ will only select the first element that is immediately preceded by the former selector.

~ selector all the sibling preceded by the former selector.

Display images when hovering over another image

2 Answers2