JSFiddle - React, Tailwind, and code Playground

HTML

<section class="opacity">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg"/></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg"/></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg"/></div>
</section>
<section class="visibility">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg"/></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg"/></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg"/></div>
</section>

CSS

.opacity{
    width: 400px;
}
.opacity div {
    width: calc(100% / 3);
    float: left;
}
.opacity img{
    max-width: 100%;
    display: block;
    opacity: 1;
    backface-visibility: hidden;
    transition: .25s;
}
.opacity img.visible{
    opacity: 0;
}
.visibility{
    width: 400px;
}
.visibility div {
    width: calc(100% / 3);
    float: left;
}
.visibility img{
    max-width: 100%;
    display: block;
    opacity: .99;
}
.visibility img.visible{
    opacity: 0;
}

JavaScript

setInterval(function(){
    $('img').toggleClass('visible');
}, 1000);