Sanjeev K Sanjeev K - 1 year ago 109
CSS Question

Image Transform rotate on each slide

I have a working slider, and it works perfectly but what I am looking for is different effect of what currently it has, Here is a working JSFiddle Example

On each slide image is zooming out and I am looking for opposite effect, that will zoom-in instead of current effect, but unable to do it.

Code is following

<div id="demo-1" data-zs-src='["", "", ""]' data-zs-overlay="dots">
<div class="demo-inner-content">
<h1><span>Testing</span> . <span>Slider</span></h1>
<p>Testing Slider Test Slideshow Test Slideshow Test Slideshow </p>

Answer Source

change the scale factor to desired value in css (here i did to 1.0)

.zs-enabled .zs-slideshow .zs-slides .zs-slide {
    background: transparent none no-repeat 50% 50%;
    background-size: cover;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);

and change the tween value to desired value (i did to 1.5)

.css( { 'opacity': 1.0, 'transform': 'scale(1.5, 1.5)', 'z-index': 2 } )

updated fiddle example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download