How to add fading transition on a changing image?

Question

I have this code:

HTML

<div id='features-buttons'>
   <button class='features-button' id='theButton' onclick='featureImage1()' type='button'><i class='fa fa-briefcase'/> Home Office</button>
   <button class='features-button' id='theButton' onclick='featureImage2()' type='button'><i class='fa fa-plus-circle'/> The Mezzaine (Add On)</button>
</div>

<img class='features-image' id='theImage' src='https://media.designcafe.com/wp-content/uploads/2019/11/17054904/interior-designer-or-decorator-make-your-choice-1.jpg' style='border-radius:30px;'/>

CSS

.features-image{
    width:100%;
    height:600px;
    object-fit: cover;
}

.features-button{
    width: 200px;
    padding: 10px 30px;
    font-family: 'Jost';
    font-size: 20px;
    border: 0px;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    color: #453011;
    margin: 5px 25%;
}

JS

function featureImage1(){
    document.getElementById("theImage").src="https://media.designcafe.com/wp-content/uploads/2019/11/17054904/interior-designer-or-decorator-make-your-choice-1.jpg";
}

function featureImage2(){
    document.getElementById("theImage").src="https://hommes.studio/wp-content/uploads/Get-To-Know-Interior-Design-Trends-2022_16.jpg";
}

I have image changer code this is by replacing the source of the image, but I want to add transition when the image is changing.

Answer 1

You can use CSS transitions. Here's your code updated, I added a transition property to the .features-image class with a duration of 0.5 seconds and an easing function of ease-in-out. I also added two new classes: .fade and .show, which will control the opacity of the image during the transition.

In JavaScript code, I added the .fade class to the image before changing its src attribute. After a 500ms delay (the same duration as the transition), I change the src attribute and remove the .fade class. I then add the .show class to make the image fully visible again. This causes the fade transition to occur between the two images:

function featureImage1(){
    var img = document.getElementById("theImage");
    img.classList.remove("show");
    img.classList.add("fade");
    setTimeout(function(){
        img.src="https://media.designcafe.com/wp-content/uploads/2019/11/17054904/interior-designer-or-decorator-make-your-choice-1.jpg";
        img.classList.remove("fade");
        img.classList.add("show");
    }, 500);
}

function featureImage2(){
    var img = document.getElementById("theImage");
    img.classList.remove("show");
    img.classList.add("fade");
    setTimeout(function(){
        img.src="https://hommes.studio/wp-content/uploads/Get-To-Know-Interior-Design-Trends-2022_16.jpg";
        img.classList.remove("fade");
        img.classList.add("show");
    }, 500);
}

.features-image{
    width:100%;
    height:600px;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}

.features-image.fade {
    opacity: 0;
}

.features-image.show {
    opacity: 1;
}

.features-button{
    width: 200px;
    padding: 10px 30px;
    font-family: 'Jost';
    font-size: 20px;
    border: 0px;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    color: #453011;
    margin: 5px 25%;
}

<div id='features-buttons'>
   <button class='features-button' id='theButton' onclick='featureImage1()' type='button'><i class='fa fa-briefcase'/> Home Office</button>
   <button class='features-button' id='theButton' onclick='featureImage2()' type='button'><i class='fa fa-plus-circle'/> The Mezzaine (Add On)</button>
</div>

<img class='features-image' id='theImage' src='https://media.designcafe.com/wp-content/uploads/2019/11/17054904/interior-designer-or-decorator-make-your-choice-1.jpg' style='border-radius:30px;'/>