Simplify Your Web Documentation

The Truly Responsive Slides extension has smooth transitions out-of-the-box when switching between slides. It is possible to add even more emphasis on those transitions by adding a zoom effect. This is what this short tutorial will demonstrate.

Step 1 Create a slideshow

Check the Quickstart Guide to learn how you can create a slideshow with Truly Responsive Slides.

Write down which id the instance of the module has (in this example, the module instance id is 353).

Step 2 Add the following CSS properties for the zoom effect

In the Advanced tab of the module, go to the Stylesheets and scripts section. In the CSS overrides field, add:

#trs_353 .flexslider .slides li img {
    -webkit-transition: -webkit-transform 1.5s ease-in-out;
    transition: -webkit-transform 1.5s ease-in-out;
    -o-transition: transform 1.5s ease-in-out;
    transition: transform 1.5s ease-in-out;
}

#trs_353 .flexslider .slides li.flex-active-slide img {
    -webkit-transform: scale(1.225);
    -ms-transform: scale(1.225);
    transform: scale(1.225);
}

The code includes prefixes to ensure the transitions work in as many browsers as possible.
Check for browser support at : caniuse.com

You can change the transforms duration and scale for more or less dramatic effects.

Step 3 Prevent the zoomed images to 'bleed' over the slideshow border (if you have any).

#trs_353 .flexslider .slides { overflow: hidden }

The result:

This zoom effect is now part of v2.0 of the extension!