I am trying to change the image of card on hover Please only CSS solution-CodePudding

I am trying to change the card's image as the user places it on it (hover). I tried the below code but with this code:

.card {
  height: auto;
  min-width: 90%;
  background-color: white;
  margin: 20px auto 0px;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.card img:hover {
  background-image: url(images/hijab-icon-black-vector-illustration-260nw-1712786086.jpg);
  width: auto;
  height: 500px;
}

<div >
  <img src="images/image-equilibrium.jpg" alt="" />
</div>

CodePudding user response：

If you're going to use the background-image approach, put it on the non :hover state. Then change the opacity of the img on :hover.

.card {
  height: auto;
  /*min-width: 90%;*/
  background-color: white;
  margin: 20px auto 0px;
  background-image: url('https://dummyimage.com/600x400/000/fff&text=behind');
  background-size: cover;
  max-width: 500px;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.card img:hover {
  opacity: 0;
}

<div >
  <img src="https://dummyimage.com/600x400/000/fff&text=front" alt="" />
</div>