This Picture Gallery is made using CSS and jQuery.
The pictures are rotated to some angle using CSS transform Property. The Images are positioned one above another using CSS z-index Property.
The Fade In / Fade Out effect is created using jQuery. jQuery is a Javascript Library. Using jQuery is very easy. jQuery also uses selectors just like CSS to apply the effects to that selector Id or Class.
The value for rotation is defined inside round brackets. The numbers can be negative or positive. A suffix deg should be added to the value of rotation. It tells the transform property to rotate an element in degrees.
transform: rotate(numeric value deg);
Example : transform: rotate(-20deg);
-moz-for Mozilla and
-webkit-for webkit browsers and
-o-for Opera must be used.
z-index: numeric value;
Example : z-index: 21;
This Property is used to stack any html element over other html elements. Its value is a number without any unit.
The element with lowest z-index will be positioned at the back. The element with highest value will be positioned at the front. Look at the example below.
The Blue colored div has z-index 1. It is positioned at the back.
The Green Colored div has z-index 2. It is positioned above Blue colored div but below Red Colored div.
The Red colored div has the highest z-index value of 3. It is positioned at the top.
Now lets try these codes :
First we’ll create a Collage Container. We’ll put all our images inside this Collage Container.
Defining this collage container is important as image will be positioned relative to this Container.
I’ve used 7 images here. You can use as many images you like, but you’ll have to define seperate properties like position and rotation for each image.
Here I’ve used 7 different id’s for each image.
<body>
collage-container> <img src=
image-folder/image-1.gifid=
collage-one/> <img src=
image-folder/image-2.gifid=
collage-two/> <img src=
image-folder/image-3.gifid=
collage-three/> <img src=
image-folder/image-4.gifid=
collage-four/> <img src=
image-folder/image-5.gifid=
collage-five/> <img src=
image-folder/image-6.gifid=
collage-six/> <img src=
image-folder/image-7.gifid=
collage-seven/> </div>
</body>
First we’ll define the properties for the Collage Container and then we’ll define properties for the images.
<head>
<style type=text/css> #collage-container{ width:700px; height:500px; margin: 30px auto; position: relative; border: 2px solid #777; } #collage-one,#collage-two,#collage-three,#collage-four, #collage-five,#collage-six,#collage-seven{ width:168px; height:224px; padding:10px; background#eee; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; position:absolute; } . . . . . </style> </head>
Line 5 › collage-container{
→ Selector Id for the <div id=collage-container
> It will contain all our images.
Line 6 › width: 700px ; Line 7 › height: 500px ;
→ Defines width and height for the container.
Line 8 › margin: 30px auto ;
→ To provide spacing arround this div.
→ Here the first value (30px) gets assigned to the top and bottom portion.
→ And the second value auto gets assigned to the right and left portion.
Line 9 › position: relative ;
→ This is important property.
→ This property will be helpful when we position the images inside this div.
Line 10 › border: 2px solid #777 ;
→ Border for the collage container div.
→ It is 2px wide solid style and grey(#777777) colored.
Line 12 › #collage-one,#collage-two,#collage-three,#collage-four,#collage-five,#collage-six,#collage-seven{
→ I’m using Multiple Selectors here, Each selector separated by a comma.
→ These are the id selectors that we are going to assign to the images.
→ The images inside the collage container have some same properties.
→ So the properties which are same for the images are defined here.
Line 14 › width: 168px ; Line 15 › height: 224px ;
→ Defines width and height for the images.
→ Refer the Image 3 › properties below.
Line 16 › padding: 10px ;
→ To provide spacing of 10px around the image.
→ Refer the Image 3 › properties below.
Line 17 › background: #EEE ;
→ Produces Light Grey(#EEEEEE) Background color for the image.
Line 18 › border-radius: 20px ; Line 19 › -moz-border-radius: 20px ; Line 20 › -webkit-border-radius: 20px ;
→ Above three codes do the same thing but for different browsers.
→ Code on Line 18 works in IE and Opera.
→ Code on the line 19 works on Mozilla Firefox.
→ Code on Line 20 works on all Webkit Browsers. → Produces round corners for the images.
Line 21 › position: absolute ;
→ Using this absolute position property we can now position the images relative to the collage container defined earlier.
→ We will use properties like left, top, right & bottom to position the images.
→ The first Image has its z-index equal to 1. This image will be positioned behind all the images.
→ This image is positioned at 30px from the top and 50px from left with respect to the collage container.
→ The Image is rotated to an (-)angle of -20° using transform property.
#collage-one{
z-index:1;
top:30px;
left:50px;
transform:rotate(-20deg);
-o-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}
collage-one
→ The Second Image has its z-index equal to 2. This image will be positioned above the first image only having its z-index equal to 1.
→ This image is positioned at 50px from the top and 50px from left with respect to the collage container.
→ The Image is rotated to an (+)angle of 10° using transform property.
#collage-two{ z-index:2; top:50px; right:50px; transform:rotate(10deg); -o-transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); }
collage-two
→ For the rest of the images the stylesheet code format will be same only different are used to position and rotate the images.
#collage-three{
z-index:3;
top:20px;
left:150px;
transform:rotate(30deg);
-o-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
#collage-four{
z-index:4;
top:250px;
left:100px;
transform:rotate(-40deg);
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
}
#collage-five{
z-index:5;
top:150px;
left:350px;
transform:rotate(-40deg);
-o-transform:rotate(-43deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-40deg);
}
#collage-six{
z-index:6;
top:50px;
left:280px;
transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
#collage-seven{
z-index:7;
top:250px;
left:250px;
transform:rotate(30deg);
-o-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
The fading effect is implemented using jQuery. jQuery is a javascript library.
To use the effect we’ll have to include jQuery in the web page.
Download the jQuery.js file and put it in the same folder as your webpage.
<head>
text/javascriptsrc=
jQuery.js></script> . . . . . .
</head>
<script type=text/javascript> $(document).ready(function(){ $(#collage-container img).mouseover(function(){ $(#collage-container img).css(z-index,1); $(this).css(z-index,999); $(this).fadeOut(100,function(){ $(this).fadeIn(1000); }); }); }); </script>
text/javascript> Line 14 › <script>
#collage-container img).mouseover(function(){
collage-container.
#collage-container img).css(
z-index,1);
collage-containerto 1 .
z-index,999);
