Positioning an image below another image when a mouse hovers over an image

Question

I'm trying to make image two appear below image one when a mouse hovers over image one.

<ul>
   <li>
    <img id="img1" src="imageone.png">
    <br>
    <img id="img2" src="imagetwo.png">  
  </li>
</ul>

Help is appreciated!

So far I have this CSS which does not seem to work

#img2 {
    display: none;
    position: absolute;
}
#img1:hover + #img2,
#img2:hover {

 display:block;
}

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

The + selects siblings that are immediately after. Your images are not, because they are separated with a <br>.

Use ~ instead:

#img1:hover ~ #img2

edited May 23 '17 at 12:23

Community

1
1

answered Jan 26 '16 at 22:49

GSerg

76,472
17
159
346

Marc Audet · Answer 2 · 2016-01-26T22:59:06.153

1

You are very close.

First, remove the <br> tag since it breaks the adjacent sibling selector.

The hover works as long as you over over the first image.

If you apply display: block to the img, then you don't need the <br> tag.

Depending on your layout, the tilde (~) selector could also work but it depends on whether you have other images in the layout (I am thinking a photo gallery).

ul {
  list-style: none;
}
#img2 {
  display: none;
}
#img1:hover + #img2 {
  display: block;
}

<ul>
   <li>
    <img id="img1" src="http://placehold.it/150x50">
    <img id="img2" src="http://placehold.it/150x50">  
  </li>
</ul>

edited Jan 26 '16 at 22:59

answered Jan 26 '16 at 22:53

Marc Audet

46,011
11
63
83

I think your answer is more complete actually. I wont know until I include more images later in my design. Thanks though – Billy Jan 26 '16 at 23:20

score 0 · Answer 3 · answered Jan 26 '16 at 22:50

use the tilde instead of the + sign, because you have a br inbetween

#img2 {
    display: none;
    position: absolute;
}
#img1:hover ~ #img2,
#img2:hover {

 display:block;
}

<ul>
   <li>
    <img id="img1" src="imageone.png">
    <br>
    <img id="img2" src="imagetwo.png">  
  </li>
</ul>

score 0 · Answer 4 · answered Jan 26 '16 at 22:53

You may be after something like this:

.parent{
  position: relative;
}
.holder{
  position: fixed;
  width: 100px;
  height:100px;
  background-color: #efefef;
}
.img{
  width: 100px;
  height:100px;
  background-color: #ffefef;
}
#img2{
  display: none;
}
.holder:hover #img2{
  display: block;
}

<ul>
   <li class="parent">
     <div class="holder">
       <img class="img" id="img1" src="imageone.png">
       <br>
       <img class="img" id="img2" src="imagetwo.png">  
    </div>
  </li>
</ul>

Positioning an image below another image when a mouse hovers over an image

4 Answers4