How To Create Image Slideshow With Resize Effect

You can create a simple image slideshow with resize effect using scale function in transform property and specifying custom width and height with CSS and JavaScript codes. Here I have created an image slideshow with resizing effect along with providing source code of CSS and JavaScript. In the preview section, each image will be resized from half of its size to its original size using resize() function on the CSS transform property which was already discussed in the previous posts about transforming elements using CSS.

Using Scale Function in Transform Property

You can give resize effect on image slideshow using scale function in transform property as given in the example below.

CSS Code:

@-webkit-keyframes resize{
from {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
50%  {-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);}
to   {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
}
@keyframes resize{
from {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
50%  {-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);}
to   {-moz-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);}
}

.resize{
-webkit-animation-name:resize;
-webkit-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:5s;

animation-name:resize;
timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:5s;
width:100%;
height:300px;
}

JavaScript Code:

<script>
var i=0;
var path=new Array();

//List of Images
path[0]="image2.jpg";
path[1]="image3.jpg";
path[2]="image4.jpg";

function slide1()
{
document.slide.src=path[i];
if(i<path.length-1) i++;else i=0;
setTimeout("slide1()",5000);
}
setTimeout("slide1()",0);
</script>

HTML Code:

<div class="resize">
<img name="slide" style="width:100%; height:100%;">
</div>

Preview: