how can i make an image change with hover?

user_14650209 0
Viewed 48

I tried making an image change to another while hovering, but instead, the second one appeared without the first disappearing this is the code, is there anything I did wrong. hope you find the question clear

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}
<div class="card">
  <img src="redlo.jpg" width="100" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

hover css image html
3 Answers

I am not quite sure if I understand your question right. On .card:hover the second image is shown above the first one and covers the first one so it is not seen anymore.

So your code is running well and there is no additional need to make the first image 'disapearing'.

But if you (however) want/need to do so just may add to your css:

.card:hover img:first-child {
    display: none;
}

Nice additonal notice: your css is doubled. You only need to write the classes .card .card .img-top and .card:hover .img-top once ;-)

UPDATE: YOUR WORKING CODE WITH IMAGES

Here you can see how your code is working correct. Just removed doubled css.

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}
<div class="card">
  <img src="https://dummyimage.com/100x100/0000ff/ffffff&text=Image+one" width="100" height="100" alt="first">
  <img src="https://dummyimage.com/100x100/ff0000/ffffff&text=Image+two" class="img-top" width="100" height="100" alt="second">
</div>

user_92684850

It seems that the height of your image is being 0

You can try:

.card:hover .img-top {
  display: block;
}

if don't work add this to .img-top selector

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
user_71580070

This should help

.card {
  width: 130px;
  height: 195px;
  position: relative;
  margin: 50px;
}

.img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: block;
}
.card:hover .img-top1 { display: none }
<div class="card">
  <img src="redlo.jpg" width="100" class="img-top1" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

user_135448490
Related