CODEWITHSUNDEEP
javascripthtmlcss
rachelmc881
rachelmc881

Reputation: 11

Image Transition on `onmouseover`

I am using this code to change from one image to another:

<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />

I need help with the code so I can slow the transition from one image to the next.

Upvotes: 1

Views: 411

Answers (1)

Tyler Durden
Tyler Durden

Reputation: 1070

The ideal solution to this would be rendering the two images and changing their opacity instead of changing src for the same tag. Something like :

<div id="container">
  <img class="bottom" src="hero_image.png" />
  <img class="top" src="selfie.svg" />
</div>

Once you are playing with the opacity, the transition effect can be applied using the following CSS :

#container img {
  position:absolute;
  left:0;
  transition: opacity 1s ease-in-out;
}

#container img.top:hover {
  opacity:0;
}

Upvotes: 1

Related Questions