CODEWITHSUNDEEP
htmlcssimagehover
Mawada Ak
Mawada Ak

Reputation: 21

how can i make an image change with hover?

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>

Upvotes: 2

Views: 69

Answers (3)

Brebber
Brebber

Reputation: 3084

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>

Upvotes: 1

Evren
Evren

Reputation: 4410

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>

Upvotes: 0

Wes Guirra
Wes Guirra

Reputation: 193

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;
}

Upvotes: 0

Related Questions