How to create fade effect image slideshow using CSS

You can give fade effect animation for image slideshow using CSS. @keyframes ‘at’ rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes ‘at’ rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties.

Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play.

Table of Contents

Simple fade effect image slideshow

Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser.

<style type="text/css">
@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;
-webkit-animation-iteration-timing-function:linear;
position:relative;-webkit-animation-iteration-count:infinite;}
</style>

Here is a full HTML code along with required JavaScript code for creating simple fade effect image slideshow.

<head>
<title>CSS Animations</title>
<style type="text/css">
@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-moz-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-o-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-ms-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;
-webkit-animation-iteration-timing-function:linear;position:relative;
-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;
-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;
-moz-animation-iteration-count:infinite;-o-animation-name:fade;
-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;
-o-animation-iteration-count:infinite;-ms-animation-name:fade;
-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;
-ms-animation-iteration-count:infinite;}
</style>
<script language="JavaScript">
var i = 0;
var path = new Array();
 
// LIST OF IMAGES
path[0] = "image1.jpg";
path[1] = "image2.jpg";
path[2] = "image3.jpg";

function swapImage1()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage1()",5000);
}
window.onload=swapImage1;
</script>
</head>
<body>
<div id="anim1"><img height="400" name="slide" src="image_1.gif" width="600" />
</div>
</body>
</html>

In the above code prefixes -webkit-, -moz-, -o-, -ms- are used for browsers safari, firefox, opera and internet explorer respectively.

Here is a preview of image slideshow for the code above.

@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-moz-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-o-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-ms-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;-webkit-animation-iteration-timing-function:linear;
position:relative;-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;-moz-animation-iteration-count:infinite;-o-animation-name:fade;-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;-o-animation-iteration-count:infinite;-ms-animation-name:fade;-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;-ms-animation-iteration-count:infinite;}

var i = 0;
var path = new Array();

// LIST OF IMAGES
path[0] = “https://www.siteforinfotech.com/wp-content/uploads/2014/11/image1.jpg”;
path[1] = “https://3.bp.blogspot.com/–UBsuaVDrLM/VGMQO4DJD9I/AAAAAAAAAlk/uvOoQv40MhM/s1600/image2.jpg”;
path[2] = “https://1.bp.blogspot.com/-x9ngyMlv5HU/VGMQPAA_gFI/AAAAAAAAAlo/Vvabz0PBmCE/s1600/image3.jpg”;

function swapImage1()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage1()",5000); } window.onload=swapImage1;

Fade effect image slideshow with caption

You can add caption for this slideshow by adding following JavaScript codes within <script> tag.

// LIST OF CAPTİONS  

caption[0] = "Caption for the first image"; 

caption[1] = "Caption for the second image"; 

caption[2] = "Caption for the third image";   

function swapImage(){ 

var el = document.getElementById("mydiv"); 

el.innerHTML=caption[i]; 

var img= document.getElementById("anim1"); 

img.src= image[i];  

if(i <k ) { i++;}  

else  { i = 0; }

For details on adding caption on image slideshow visit the post: How To Create Simple Image Slideshow Using JavaScript ?

Fade effect image slideshow with caption and link

You can add caption for this slideshow by adding following JavaScript codes within <script> tag.

var link= new Array();   

link[0] = "https://www.siteforinfotech.com/"; 
link[1] = "https://www.siteforinfotech.com/p/tutorial.html"; 
link[2] = "https://www.siteforinfotech.com/p/mcqs.html";   
      

function swapImage(){ 

var el = document.getElementById("mydiv"); 

el.innerHTML=caption[i]; 

var img= document.getElementById("anim1"); 

img.src= image[i]; 

var a = document.getElementById("link"); 
a.href= link[i];  

if(i <k ) { i++;}  

else  { i = 0; }

For details on adding caption and link on image slideshow visit the post: How to Create JavaScript Image Slideshow with Links