CODEWITHSUNDEEP
htmlcssimage
Umair Ayub
Umair Ayub

Reputation: 21231

Is it possible to hide the hovered image and show another image using only CSS?

My problem is that I have 2 images; #two is initially hidden.

Is there any way in only CSS (no JS) so that when I hover at #one it gets hidden and #two is shown, possible with some animation

#two{
    display:none;
}
#one:hover + #two{
    display: block;
}
<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

PS: I am working on a Google Chrome Extension

EDIT: there is idea to use background-image : url() of image and change it on hover, but I don't want it, as it doesn't work, it needs to give full chrome extension path including extension ID

Upvotes: 4

Views: 1270

Answers (3)

Randy
Randy

Reputation: 9809

@ATomCalledStu has given the CSS only answer, but that only works if you have a relative wrapper.

What would work even better with any wrapper, is setting the :hover on the wrapper:

.wrapper, img {
  display:inline-block;
}
#two {
  display:none;
}
.wrapper:hover #two {
  display: inline-block;
}
.wrapper:hover #one {
  display: none;
}
<div class="wrapper">
  <img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

  <img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>
</div>

If you alter somebody's website, you can probably see that the images most likely have a wrapper element (div, span, anything) and use that to set the :hover selector.

I usually want to avoid position:absolute unless I am absolutely sure that the behavior never relies on relative positioning. In this case, especially because I don't know what your page looks like, the chances that absolute does not work seems very likely.

Update:

If you want an animation, you are probably best off with position:absolute as the previous answer suggested. Sorry for the confusion ;)

Upvotes: 4

Jabberwocky
Jabberwocky

Reputation: 789

Here's the complete solution, with animation:

You set them both as position: absolute and body is position: relative (or whatever container you have).

Then you set display: block; but opacity: 0; on the hidden one. set transitions on css on the hidden element and also set the same opacity: 1; when hovering the second element. You're good to go:

#two {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: 0;
  transition: all 1s linear;
}

#one {
  position: absolute;
  z-index: 0;
}

#one:hover+#two,
#two:hover {
  opacity: 1;
}

body {
  position: relative;
}
<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

Upvotes: 2

Claire
Claire

Reputation: 3184

You can just overlay them with absolute positioning, then turn down the opacity on the top image on hover, like so:

img {
  position:absolute;
  top:0;
  left:0;
  transition:all .6s ease;
}
#one {
  z-index:20;
}
#one:hover {
  opacity:0;
}

Here is a working example: https://jsfiddle.net/pksjg76x/

You can't use display:none in this case because you need the top element to remain inside the document to utilize the hover property. An opacity change might be your best option here, as long as you don't need the second image to contain any functionality besides viewing.

You can also use animation properties here very easily here.

Upvotes: 3

Related Questions