In this tutorial I am going to show you how to create a full screen responsive image gallery using CSS and Masonry ( is a JavaScript grid layout library ), I am giving you image gallery example but you can create your blog posts, user profiles, video wall etc using this technique so we are giving you this tutorial with a nice demo and source to download for free.

Above markup create images grid with title and description with images placeholder for fast images delivery http://placekitten.com/1024/768 placekitten.com is A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.

CSS to organize your gallery:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

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

<style>

.item {

float:left;

position:relative;

line-height:1em;

}

.grid-sizer {width:20%;}

.item {width:20%;}

@media screen and (max-width: 1224px) {

/* 10 columns for larger screens */

.grid-sizer {width:33.33%;}

.item {width:33.33%;}

}

@media screen and (max-width: 720px) {

/* 10 columns for larger screens */

.grid-sizer {width:50%;}

.item {width:50%;}

}

@media screen and (max-width: 480px) {

/* 10 columns for larger screens */

.grid-sizer {width:100%;}

.item {width:100%;}

}

.image{

max-width:100%;

margin:0;

display:block;

}

.image:after {

clear:both;

}

.onhandover {

width:100%;

height:100%;

background-color:rgba(0,0,0,0.5);

position:absolute;

top:0;

left:0;

text-decoration:none;

color:#fff;

display:none;

}

.onhandover .title {

text-align:center;

font-size:30px;

}

.onhandover .description {

position:absolute;

bottom:0;

left:0;

background-color:rgba(0,0,0,0.80);

width:100%;

margin:0;

}

.onhandover .description p {

text-align:center;

}

.item:hover .onhandover {

display:block;

}

</style>

We used @media for different screens to make gallery responsive and .onhandover class to show title and description oh handover event.

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.