A CSS Only Image Gallery

With Zooming!
April 5, 2012 at 5:04 pm By Johnny Simpson

DOWNLOAD DEMO

So today were going to be making an image gallery where the

images zoom out on click. Well also add a close button for
closing the images after theyve been zoomed out. Best of all,
were going to be doing it all with just CSS!
Its best to keep this non-scrollable, since

:target makes the page jump

to the object, which would be rather annoying on a scrollable website. If you

need to, we can override this with a simple line of Javascript, which you can
find at the end of this tutorial.

Support
NUMBEROFUSERSWHOCANUSE

FullDemo

55.93%

WithoutTransitions

72.47%

Lets Begin
To start, lets take a look at the HTML. It consists of a large parent element
which contains several holders, each of which act as a single image. Each
holder has a few features such as a close button, an image, and a link which
allows us to click the image to expand it. Each expand link is linked to the
holder parent, so that we can use :target in CSS.
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<divid="imagesbox">
<divclass="holder">
<divid="image1"class="imagelightbox">
<spanclass="close"><ahref="#">X</a></span>
<imgsrc="1.jpg"alt="earth!">
<aclass="expand"href="#image1"></a>
</div>
</div>
<divclass="holder">
<divid="image2"class="imagelightbox">
<spanclass="close"><ahref="#">X</a></span>
<imgsrc="2.jpg"alt="earth!">
<aclass="expand"href="#image2"></a>
</div>
</div>
<divclass="holder">
<divid="image3"class="imagelightbox">
<spanclass="close"><ahref="#">X</a></span>
<imgsrc="3.jpg"alt="earth!">
<aclass="expand"href="#image3"></a>
</div>
</div>
</div>

The CSS
The CSS isnt that challenging. To begin, lets style the parent holder
elements.
?

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

#imagesbox{
/*Thetotalwidthoftheimagebox,mainlyforcentering*/
width:850px;
margin:0pxauto;
position:relative;
top:70px;
}

.imagelightboximg{
/*Inheritthewidthandheightfromtheparentelement*/
width:inherit;
height:inherit;
zindex:3000;
}

.holder{
/*Thewidthandheight,youcanchangethese*/
width:250px;
height:166px;
/*Floatleft,soeverythingalignsright*/
float:left;
margin:020px00;
}

.imagelightbox{
/*Inheritwidthandheightfromthe.holder*/
width:inherit;
height:inherit;
padding:10px;
/*Boxshadow*/
boxshadow:0px0px10pxrgba(0,0,0,0.1);
background:#fff;
borderradius:5px;
/*Positionabsolutelysowecanzoomitoutlater*/
position:absolute;
top:0;
fontfamily:Arial,sansserif;
/*Transitionstoprovidesomeeyecandy*/
webkittransition:alleasein0.5s;
moztransition:alleasein0.5s;

41
42
43

mstransition:alleasein0.5s;
otransition:alleasein0.5s;
}

Next we need to style the internal elements. I set the

<span> elements

to display: none so that we can make the close button appear

when the user clicks on the image. The anchor has been altered to fill the
entire parent element, making it all clickable.
?

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

.imagelightboxspan{
display:none;
}

.imagelightbox.expand{
width:100%;
height:100%;
position:absolute;
top:0;
zindex:4000;
background:rgba(0,0,0,0);/*FixesanIEbug*/
left:0;
}

.imagelightbox.close{
position:absolute;
width:20px;height:20px;
right:20px;top:20px;
}

.imagelightbox.closea{
height:auto;width:auto;
padding:5px10px;
color:#fff;
textdecoration:none;
background:#22272c;
boxshadow:inset0px24px20px15pxrgba(255,255,255,0.1),inset0px0px10pxr
rgba(255,255,255,0.4);
borderradius:5px;
fontweight:bold;
float:right;
}

.imagelightbox.closea:hover{
boxshadow:inset0px24px20px15pxrgba(255,255,255,0.01),inset0px0px10p
rgba(255,255,255,0.4);
}

Before we continue onto the :target stuff, some positioning is required.

If you want to add more images youll have to add some stuff here.
?

1
2
3

div#image1{left:0;}
div#image2{left:290px;}
div#image3{left:580px;}

The actual targeting of elements isnt that hard. We just need to change the
position

and

z-index,

oh,

and

change

some

of

the

elements display property.

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

div[id^=image]:target{
width:450px;
height:300px;
zindex:5000;
top:50px;
left:200px;
}
div[id^=image]:target.close{
display:block;
}

div[id^=image]:target.expand{
display:none;
}

div#image1:target,div#image2:target,div#image3:target{left:200px;}

And thats it! Heres the full CSS as usual, in case you just want to copy and
paste. Have a good day, check out the demo, and if you feel so inclined, click
that tweet button.