How To Create Image Slideshow With Resize Effect

You can create 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 image slideshow with resize effect along with providing source code of CSS and JavaScript. In the preview section, each image will resized from half of its size to its original size using resize() function on CSS transform property which was already discussed on 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 on 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 style="width:100%; height:100%;">
</div>

Preview:



Specifying Custom Width and Height


You can also give resize effect on image slideshow with specifying custom width and height of image as given on the example below.

CSS Code:

@-webkit-keyframes resize{
  from {width:50%; height:150px;}
  50%  {width:100%; height:300px;}
  to   {width:50%; height:150px;}
  }
@keyframes resize{
  from {width:50%; height:150px;}
  50%  {width:100%; height:300px;}
  to   {width:50%; height:150px;}
  }
.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;
  position:absolute;
  width:100%;
  height:300px;
  }

HTML Code:

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