Constantly Transitioning Image Effect Have a header or footer image regularly update smootly fade in a new image while the old one fades out The below examples show different transition effects using a basic timeout delay every 5 seconds a random new image is selected style imgcontainer position relative height 400px width 550px margin 0 auto border 1px solid black position relative imgholder position absolute left 0 top 0 width 100 height 100 background size cover background image opacity 0 webkit transition opacity 3s ease transition opacity 3s ease showme opacity 1 style div id imgcontainer div id img0 class imgholder div div id img1 class imgholder div div script let imgs https cdn wallpapersafari com 98 8 6xKfhe jpg https www teahub io photos full 261 2612707_alien planet wallpaper jpg https c4 wallpaperflare com wallpaper 513 834 427 artwork digital art planet city wallpaper preview jpg https cutewallpaper org 21 stellar backgrounds Fantasy Space Artwork Hd Wallpapers Wallpapers Point jpg https wallpaperaccess com full 86290 jpg setTimeout update 3000 let curImageId 0 refreshimage setInterval refreshimage 5000 function refreshimage console log update curImageId let imgActive document getElementById img curImageId let imgurl imgs Math floor Math random imgs length imgActive style background image url imgurl imgActive classList add showme curImageId curImageId 1 2 let imgOld document getElementById img curImageId imgOld classList remove showme console log ready script style imgcontainer position relative height 400px width 550px margin 0 auto border 1px solid black position relative imgholder position absolute left 0 top 0 width 100 height 100 background size cover background image webkit transform origin top right transform origin top right webkit transform scale 0 0 transform scale 0 0 opacity 0 webkit transition all 3s ease transition all 3s ease showme webkit transform scale 1 1 transform scale 1 1 opacity 1 style div id imgcontainer div id img0 class imgholder div div id img1 class imgholder div div script let imgs https cdn wallpapersafari com 98 8 6xKfhe jpg https www teahub io photos full 261 2612707_alien planet wallpaper jpg https c4 wallpaperflare com wallpaper 513 834 427 artwork digital art planet city wallpaper preview jpg setTimeout update 3000 let curImageId 0 refreshimage setInterval refreshimage 5000 function refreshimage console log update curImageId let imgActive document getElementById img curImageId let imgurl imgs Math floor Math random imgs length imgActive style background image url imgurl imgActive classList add showme curImageId curImageId 1 2 let imgOld document getElementById img curImageId imgOld classList remove showme console log ready script style imgcontainer position relative height 400px width 550px margin 0 auto border 1px solid black position relative imgholder position absolute left 0 top 0 width 100 height 100 background size cover background image filter alpha opacity 0 webkit transform rotate 360deg scale 0 0 transform rotate 360deg scale 0 0 webkit transition all 3s ease transition all 3s ease showme filter alpha opacity 1 webkit transform rotate 0deg scale 1 1 transform rotate 0deg scale 1 1 style div id imgcontainer div id img0 class imgholder div div id img1 class imgholder div div script let imgs https cdn wallpapersafari com 98 8 6xKfhe jpg https www teahub io photos full 261 2612707_alien planet wallpaper jpg https c4 wallpaperflare com wallpaper 513 834 427 artwork digital art planet city wallpaper preview jpg setTimeout update 3000 let curImageId 0 refreshimage setInterval refreshimage 5000 function refreshimage console log update curImageId let imgActive document getElementById img curImageId let imgurl imgs Math floor Math random imgs length imgActive style background image url imgurl imgActive classList add showme curImageId curImageId 1 2 let imgOld document getElementById img curImageId imgOld classList remove showme console log ready script
div id img1 class imgholder div div script let imgs https cdn wallpapersafari com 98 8 6xKfhe jpg https www teahub io photos full 261 2612707_alien planet wallpaper jpg https c4 wallpaperflare com wallpaper 513 834 427 artwork digital art planet city wallpaper preview jpg setTimeout update 3000 let curImageId 0 refreshimage setInterval refreshimage 5000 function refreshimage console log update curImageId let imgActive document getElementById img curImageId let imgurl imgs Math floor Math random imgs length imgActive style background image url imgurl imgActive classList add showme curImageId curImageId 1 2 let imgOld document getElementById img curImageId imgOld classList remove showme console log ready script style imgcontainer position relative height 400px width 550px margin 0 auto border 1px solid black position relative imgholder position absolute left 0 top 0 width 100 height 100 background size cover background image filter alpha opacity 0 webkit transform rotate 360deg scale 0 0 transform rotate 360deg scale 0 0 webkit transition all 3s ease transition all 3s ease showme filter alpha opacity 1 webkit transform rotate 0deg scale 1 1 transform rotate 0deg scale 1 1 style div id imgcontainer div id img0 class imgholder div div id img1 class imgholder div div script let imgs https cdn wallpapersafari com 98 8 6xKfhe jpg https www teahub io photos full 261 2612707_alien planet wallpaper jpg https c4 wallpaperflare com wallpaper 513 834 427 artwork digital art planet city wallpaper preview jpg setTimeout update 3000 let curImageId 0 refreshimage setInterval refreshimage 5000 function refreshimage console log update curImageId let imgActive document getElementById img curImageId let imgurl imgs Math floor Math random imgs length imgActive style background image url imgurl imgActive classList add showme curImageId curImageId 1 2 let imgOld document getElementById img curImageId imgOld classList remove showme console log ready script