Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > CSS Tutorials > CSS Collage Gallery Tutorial   

CSS Collage Gallery Tutorial

Learn how to create a collage photo gallery with fading mouseover effect using CSS and jQuery. The demo, code, in-depth explanation and free download zip file are all included!

css collage gallery

BMW MIII Circles Empty Road Cute Puppy Cook_Islands Fractal Tiger summer Time
Rollover the images to see the effect

Css Collage Gallery

This Picture Gallery is made using CSS and jQuery.
The pictures are rotated to some angle usign CSS transform Property. The Images are positioned one above another using CSS z-index Property.
The Fade In / Fade Out effect is created usign 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.

→ CSS Transform Syntax

The value for rotation is defined inside round brackets. The numbers can be negetive 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);

transform →
rotate →
Numeric Value →
This is the Css transform Property.
Rotates the element in degrees.
Numeric value can be negetive or positive

Look at the image below.
The image is rotated -20deg with respect to Y-axis on the negetive side of the X-axis.



Image 1 › transform

This Css property will work only on IE9.
To make it work on other browsers like Mozilla ,Webkit browsers and Opera a prefix -moz- for Mozilla and -webkit- for webkit browsers and -o- for Opera must be used.

Example:

For IE
Opera
For Mozilla Firefox
For Webkit Browsers
transform:
-o-transform:
-moz-transform:
-webkit-transform:
rotate(-20deg);
rotate(-20deg);
rotate(-20deg);
rotate(-20deg);


→ CSS Z-Index Syntax

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.


Image 2 › z-index


Now lets try these codes :

Code for <body> </body> tag

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id=collage-container> <img src=image-folder/image-1.gif id=collage-one /> <img src=image-folder/image-2.gif id=collage-two /> <img src=image-folder/image-3.gif id=collage-three /> <img src=image-folder/image-4.gif id=collage-four /> <img src=image-folder/image-5.gif id=collage-five /> <img src=image-folder/image-6.gif id=collage-six /> <img src=image-folder/image-7.gif id=collage-seven /> </div>
</body>

Code for <head> </head> tag

The CSS

First we'll define the properties for the Collage Container and then we'll define properties for the images.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.
.
.
.
.
89
90
91
92
<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>

The Explanation

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 seperated by a comma.
→ These are the id selectors that we are going to assign to the images.
→ The images inside the colloage 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 arround 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.


Image 3 › properties


Apply the Rotation property and Z-Index Property

For the first image

→ 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.

23
24
25
26
27
28
29
30
31
32

#collage-one{
z-index:1;
top:30px;
left:50px;
transform:rotate(-20deg);
-o-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
}

BMW MIII

Image 4 › image id=collage-one

For the second image

→ 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.

33
34
35
36
37
38
39
40
41
42

#collage-two{
z-index:2;
top:50px;
right:50px;
transform:rotate(10deg);
-o-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}


Circles

Image 5 › image id=collage-two

The Stylesheet code for rest of the images

→ For the rest of the images the stylesheet code format will be same only different are used to position and rotate the images.

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

#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

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.
Webpage and jQuery on same page !

Two versions of jQuery are available for downloading: one minified and one uncompressed.
Both versions can be downloaded from jQuery.com.
To include jQuery use the following code inside the <head> tags.
1
2
3
4
.
.
.
14
15
16
<head>
<script type=text/javascript src=jQuery.js ></script> . . . . . .
</head>
After including the jquery file, we will use the mouseover event to trigger the fading effect.
jQuery uses id/class selectors just like CSS to apply the effects to the html element where id/class selectors are assigned.
Following is the code to apply fading effect.
5
6
7
8
9
10
11
12
13
14
<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>

The Explanation

Line 5 ›   <script type=text/javascript>    Line 14 › <script>
→ The starting and the ending of the script code.
All the jQuery coding will be inside the <script> </script> tags.

Line 6 › $(document).ready(function(){
→ Tells the browser to run the function when the html document has finished loading completely.
→ This function starts on Line 6 and ends at Line 12 with    });.

Line 7 › $(#collage-container img).mouseover(function(){
→ This is a function which will run when mouse is hoverd over an image contained inside the div having id=collage-container .
→ This function starts on Line 7 and ends on Line 11 with    });. .

Line 8 › $(#collage-container img).css(z-index,1);
→ Sets the z-index value of all the images contained inside the div having id=collage-container to 1 .

Line 9 › $(this).css(z-index,999);
→ Here $(this) refers to the hovered image.
→ Sets the z-index value of the mouse hovered image to 999.
→ So the image gets positioned above all other images.

Line 10 › $(this).fadeOut(100,function(){ $(this).fadeIn(1000); });
→ The hovered image first fades out and then when it appears back it is positioned at the top of other images.
→ The hovered image Fade Out speed is 100 milliseconds and Fade In speed is set to 1000 milliseconds( 1 second ).

Download the Demo File      Downloaded : 5129 times


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Responsive Website Design? Choose from over 2000 templates!

Featured Template
Template # 40348
Type: WordPress
Price: $75