javascript - Bootstrap carousel zoom transition -


i have images in bootstrap carousel , transition effect want zoom active image , show next image. - http://cssdeck.com/labs/solitary-css3-slider-zoom-transition, zoom of active slide.

i tried change bootstrap's css, doesn't scale active slide, next one.

.carousel-inner .item{   transition-property: transform;   transform: scale(1); }  .carousel-inner .item.active{   transform: scale(1.5); }  /* turning off default transition effect */ .next, .prev, .active.left, .active.right {   left: 0;   transform: translate3d(0, 0, 0); } 

the problem when slide.bs.carousel event occures next slide active 1 , want zoom effect before switching carousel's slide.

maybe triggering effect js before next slide shown help.

how can achieve this?

here need : http://codepen.io/statix/pen/dnlmxb

simply create carousel-item responsive image inside , transition :

.carousel-holder .carousel-item {     position: absolute;     left: 0;     top: 0;     -webkit-transition: 1s ease 0s;     transition: 1s ease 0s;     -webkit-transform: scale(1);     transform: scale(1); }  .carousel-holder .carousel-item .img-responsive {     position: absolute;     left: 0;     top: 0;     -webkit-transition: 1s ease 0s;     transition: 1s ease 0s;     transform: perspective(100vw) translatez(15vw);     opacity: 0; }  .carousel-holder .carousel-item.active .img-responsive {     opacity: 1;     transform: perspective(100vw) translatez(0); } 

enjoy ;)


Comments

Popular posts from this blog

matlab - error with cyclic autocorrelation function -

django - (fields.E300) Field defines a relation with model 'AbstractEmailUser' which is either not installed, or is abstract -

c# - What is a good .Net RefEdit control to use with ExcelDna? -