CODEWITHSUNDEEP
cssreactjsimagehoverrollover
Thekatsman
Thekatsman

Reputation: 13

Making rollover between 2 images by hover

I'm using React and try to change 2 images by hovering them.
This is what I have done so far:

Card.js

<div className="image-wrapper">
    <img src={sprites.front_default} className="image" alt="normal" />
    <img src={sprites.back_default} className="image-hover" alt="hover" />
  </div>

style.css

.image-wrapper {
  position: relative;
}

.image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-out;
}
.image-hover:hover {
  opacity: 1;
}

The main problem is that i want to make the front image opacity to 0 when im hovering the div, how can i make it?

I can make it without the fade changing but its important to make it with transition.
This is how I make it without transition

<img
        className="figure"
        src={sprites.front_default}
        onMouseOver={(e) => (e.currentTarget.src = sprites.back_default)}
        onMouseOut={(e) => (e.currentTarget.src = sprites.front_default)}
        alt={"pokemon"}
      />

Upvotes: 0

Views: 713

Answers (1)

crls_b
crls_b

Reputation: 720

You can use just HTML & CSS. In the Card:

<div className="image-wrapper">
  <img
    src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
    className="pokemon-image"
    alt="normal"
  />
  <img
    src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png"
    className="pokemon-image pokemon-image--back"
    alt="normal"
  />
</div>

Here, I've used one class pokemon-image to position the two images at the center of the image-wrapper element, and pokemon-image--back as the class that is showed when hovering over the image-wrapper element.

The CSS:

.image-wrapper {
  width: 200px;
  height: 150px;
  background-color: #f7f7f7;
  position: relative;
}

.pokemon-image {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.pokemon-image--back {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.image-wrapper:hover .pokemon-image--back {
  opacity: 1;
}

Hope this helps. You can try it in this codesandbox.

Upvotes: 1

Related Questions