Cascading Images
With cascading images you can show your images with a beatifull design and effect.
View Examples Buy Porto
<div class="cascading-images-wrapper"> <div class="cascading-images position-relative"> <img src="img/blog/default/blog-9.jpg" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-duration="600ms" /> <div class="position-absolute w-100" style="top: 41%; left: -30%;"> <img src="img/blog/default/blog-35.jpg" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" /> </div> <div class="position-absolute w-100" style="top: 75%; left: 30%;"> <img src="img/blog/default/blog-40.jpg" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="600" data-appear-animation-duration="600ms" /> </div> </div> </div>
<div class="cascading-images-wrapper">
<div class="cascading-images position-relative">
<img src="img/blog/default/blog-9.jpg" class="appear-animation" width="500" alt="" data-appear-animation="fadeInUpShorter" data-appear-animation-duration="600ms" data-plugin-options="{'accY': -300}" />
<div class="position-absolute w-100" style="top: 41%; left: -30%;">
<img src="img/blog/default/blog-35.jpg" class="appear-animation" width="500" alt="" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300" data-appear-animation-duration="600ms" data-plugin-options="{'accY': -300}" />
</div>
<div class="position-absolute w-100" style="top: 75%; left: 30%;">
<img src="img/blog/default/blog-40.jpg" class="appear-animation" width="500" alt="" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600" data-appear-animation-duration="600ms" data-plugin-options="{'accY': -150}" />
</div>
</div>
</div>
<div class="cascading-images-wrapper"> <div class="cascading-images position-relative"> <div class="overflow-hidden"> <img src="img/blog/default/blog-9.jpg" class="appear-animation" width="500" alt="" data-appear-animation="maskUp" data-appear-animation-duration="600ms" /> </div> <div class="position-absolute overflow-hidden w-100" style="top: 41%; left: -30%;"> <img src="img/blog/default/blog-35.jpg" class="appear-animation" width="500" alt="" data-appear-animation="maskRight" data-appear-animation-delay="300" data-appear-animation-duration="600ms" /> </div> <div class="position-absolute overflow-hidden w-100" style="top: 75%; left: 30%;"> <img src="img/blog/default/blog-40.jpg" class="appear-animation" width="500" alt="" data-appear-animation="maskLeft" data-appear-animation-delay="600" data-appear-animation-duration="600ms" /> </div> </div> </div>
<div class="cascading-images-wrapper"> <div class="cascading-images position-relative"> <img src="img/blog/default/blog-9.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-duration="600ms" /> <div class="position-absolute w-100" style="top: 41%; left: -30%;"> <img src="img/blog/default/blog-35.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" /> </div> <div class="position-absolute w-100" style="top: 75%; left: 30%;"> <img src="img/blog/default/blog-40.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="600" data-appear-animation-duration="600ms" /> </div> </div> </div>
<div class="cascading-images-wrapper">
<div class="cascading-images position-relative">
<div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.2, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
<img src="img/blog/default/blog-9.jpg" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-duration="600ms" />
</div>
<div class="position-absolute w-100" style="top: 41%; left: -30%;">
<div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.3, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
<img src="img/blog/default/blog-35.jpg" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" />
</div>
</div>
<div class="position-absolute w-100" style="top: 75%; left: 30%;">
<div data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.4, 'transition': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
<img src="img/blog/default/blog-40.jpg" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="600" data-appear-animation-duration="600ms" />
</div>
</div>
</div>
</div>
<div class="cascading-images-wrapper pb-0"> <div class="cascading-images position-relative"> <img src="img/blog/default/blog-9.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-duration="600ms" /> <div class="position-absolute w-100" style="top: 25%; left: 10%;"> <img src="img/blog/default/blog-40.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" /> </div> </div> </div>
<div class="cascading-images-wrapper pb-0"> <div class="cascading-images position-relative"> <div class="cascading-images-colored-bar bg-primary position-absolute top-0 right-0 bottom-0 left-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-duration="600ms"></div> <div class="position-relative" style="top: 40px; left: 40px;"> <img src="img/blog/default/blog-9.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500" data-appear-animation-duration="600ms" /> </div> </div> </div>
<div class="cascading-images-wrapper pb-0">
<div class="cascading-images position-relative">
<div class="position-absolute top-0 right-0 bottom-0 left-0" data-plugin-float-element data-plugin-options="{'startPos': 'top', 'speed': 0.1, 'transition': true, 'horizontal': true, 'transitionDuration': 1000, 'isInsideSVG': true}">
<div class="cascading-images-colored-bar bg-primary position-absolute top-0 right-0 bottom-0 left-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-duration="600ms"></div>
</div>
<div class="position-relative" style="top: 35px; left: 35px;">
<img src="img/blog/default/blog-9.jpg" class="appear-animation box-shadow-3" width="500" alt="" data-appear-animation="fadeIn" data-appear-animation-delay="500" data-appear-animation-duration="600ms" />
</div>
</div>
</div>
Porto Elements
Porto comes with several elements options, it's easy to customize
and create the content of your website's pages.