Add transition while changing img src with javascript

Question

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.

http://jsfiddle.net/Ne5zw/1/

html

<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">

js

function imgChange(im){
document.getElementById('bg').src=(im);
}

You might not be able to seamlessly blend from one image to the other (this will happen immediately when you change the src), but you could fade out, set the src, and fade back in with some CSS transitions... — adv12, May 10 '14 at 16:11
You might use CSS `background-image` on a `div` tag instead. You will then need two `div`s, one overlaying the other (wrapping them in a wrapper `div` both children positioning absolute at `left`:`top` 0:0). Then you can use `transition` on **`opacity`** (for smoothening). — try-catch-finally, May 10 '14 at 17:12

score 15 · Answer 1 · edited Apr 30 '18 at 11:32

Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.

.image-container {
  background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
  background-size: contain;

  width: 150px;
  height: 150px;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.image-container:hover {
  background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}

<div class="image-container"></div>

score 14 · Answer 2 · answered May 10 '14 at 17:13

You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:

<div id="container">
    <img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">

    <img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>

CSS:

.hidden{
 opacity:0;   
}

img{
    position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

With a transition set for opacity on the images, all we need to do is trigger it with this script:

$(function(){
    debugger;
    $(document).on('mouseenter', '#hoverMe', function(){
        $('img').toggleClass('hidden');
    });
});

http://jsfiddle.net/Ne5zw/12/

fiddle broken, need fix image – ey dee ey em Oct 22 '17 at 02:56 — ey dee ey em, Oct 22 '17 at 02:56

score 9 · Answer 3 · answered Feb 11 '19 at 13:29

Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.

Javascript:

        var bool = false;
        setInterval(() => {
            bool = !bool;
            let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
            $('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
            setTimeout(() => {
                $('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
            }, 400); // Ensure timeout matches transition time, remove transition class
        }, 6000);

CSS:

.parallax-slider {
    transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    opacity: 1;
}
.transitioning-src {
    transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    opacity: 0;
}

This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.

Can you tell me the name and how to add transition effect just like Instagram live story(when we swipe right to diffrent live story)?Thanks — user1788736, Jun 13 '20 at 10:07

score 1 · Answer 4 · answered Jul 07 '22 at 15:15

Fixed Mister Epic solution's images in this jsfiddle.

HTML

<div id="container">
  <img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
  <img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
 <div id="hoverMe">hover me</div>

CSS

    div#hoverMe {
    background-color:yellow;
    width:50px;
    height:50px;
    position:fixed;
    top:300px;
}

div#container{
   position:relative;
    height:200px;
}

.hidden{
 opacity:0;   
}

img{
    position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

JS

$(function(){
    $(document).on('mouseenter', '#hoverMe', function(){
        $('img').toggleClass('hidden');
    });
});

Add transition while changing img src with javascript

4 Answers4

Linked

Related