stacked photo card gallery - Free Download Stacked Photo Card Gallery/Slider Using jQuery And CSS/CSS3

Free Download Stacked Photo Card Gallery/Slider Using jQuery And CSS/CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Stacked Photo Card Gallery/Slider Using jQuery And CSS/CSS3, hope it will help you in programming stack.

stacked photo card gallery - Free Download Stacked Photo Card Gallery/Slider Using jQuery And CSS/CSS3
File Size: 3.77 KB
Views Total: 105
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

This tutorial shows how to make use of jQuery and CSS animations to create a fancy stacked photo card gallery/slider just like a stack of polaroid pictures.

How to use it:

1. Add images to the slider following the HTML structure as these:

view source
01 <div id="allcontent">
02   <div id="maincontent">
03     <div class="portfolio">
04       <img src="1.jpg" alt="Image Alt" /><br />
05       <div class="ombra"></div>
06     </div>
07     <div class="portfolio">
08       <img src="2.jpg" alt="Image Alt" /><br />
09       <div class="ombra"></div>
10     </div>
11     <div class="portfolio">
12       <img src="3.jpg" alt="Image Alt" /><br />
13       <div class="ombra"></div>
14     </div>
15     <div class="portfolio">
16       <img src="4.jpg" alt="Image Alt" /><br />
17       <div class="ombra"></div>
18     </div>
19     <div class="portfolio">
20       <img src="5.jpg" alt="Image Alt" /><br />
21       <div class="ombra"></div>
22     </div>
23   </div>
24   <div id="navi"></div>
25 </div>

2. The main CSS for the slider.

view source
001 img {
002   width: 100%;
003 }
004  
005 #allcontent {
006   margin: 60px auto 0 auto;
007   width: 100%;
008   max-width: 1140px;
009   height: 700px;
010   position: relative;
011   animation: comein 1.5s ease-in-out;
012 }
013  
014 .portfolio {
015   width: 100%;
016   max-width: 1000px;
017   position: absolute;
018   right: 0;
019   top: 0;
020   transition: 0.2s;
021   cursor: pointer;
022   box-shadow: -2px 0 3px rgba(0, 0, 0, 0.3);
023 }
024  
025 .portfolio:nth-child(1) {
026   left: 10px;
027 }
028  
029 .portfolio:nth-child(1):hover {
030   left: 0px;
031   transform: rotate(-2deg);
032 }
033  
034 .portfolio:nth-child(2) {
035   left: 10%;
036 }
037  
038 .portfolio:nth-child(2):hover {
039   left: 5%;
040   transform: rotate(-2deg);
041 }
042  
043 .portfolio:nth-child(3) {
044   left: 20%;
045 }
046  
047 .portfolio:nth-child(3):hover {
048   left: 15%;
049   transform: rotate(-2deg);
050 }
051  
052 .portfolio:nth-child(4) {
053   left: 30%;
054 }
055  
056 .portfolio:nth-child(4):hover {
057   left: 25%;
058   transform: rotate(-2deg);
059 }
060  
061 .portfolio:nth-child(5) {
062   left: 40%;
063 }
064  
065 .portfolio:nth-child(5):hover {
066   left: 35%;
067   transform: rotate(-2deg);
068 }
069  
070 .opened {
071   z-index: 1000;
072   left: 0 !important;
073   transform: rotate(0deg);
074   <

Related posts: