Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
We can use lists and CSS to create an animated photo gallery.
The following example displays a basic photo gallery without any effects.
Example of laying out of images in a list (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color:#eee;
}
div.photogallery ul li
{
display:inline-block; /* display list items beside each other */
background-color:white;
width:250px; /* width of each image */
text-align:center; /* text under image */
padding:10px;
margin:40px;
}
div.photogallery ul li:hover
{
position:relative;
z-index:5; /* place this image on the top */
}
div.photogallery ul li img
{
width:100%; /* img takes up full width of containing li */
padding-bottom:10px; /* push text down a bit */
}
</style>
</head>
<body>
<div class="photogallery">
<ul>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
</ul>
</div>
</body>
</html>
The following example displays a photo gallery with drop shadows.
Example of photo gallery with drop shadow effect (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color:#eee;
}
div.photogallery ul li
{
display:inline-block; /* display list items beside each other */
background-color:white;
width:250px; /* width of each image */
text-align:center; /* text under image */
padding:10px;
margin:40px;
}
div.photogallery ul li:hover
{
position:relative;
z-index:5; /* place this image on the top */
}
div.photogallery ul li img
{
width:100%; /* img takes up full width of containing li */
padding-bottom:10px; /* push text down a bit */
}
/* Additional styles to give the images a drop shadow */
div.photogallery ul li
{
box-shadow:0 3px 6px rgba(5,5,50,.5);
}
div.photogallery ul li:hover
{
box-shadow:0 3px 6px rgba(35,35,0,.8);
}
</style>
</head>
<body>
<div class="photogallery">
<ul>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
</ul>
</div>
</body>
</html>
The following example displays a photo gallery that scales when the mouse hovers over an image.
Example of photo gallery with scaling (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color:#eee;
}
div.photogallery ul li
{
display:inline-block; /* display list items beside each other */
background-color:white;
width:250px; /* width of each image */
text-align:center; /* text under image */
padding:10px;
margin:40px;
}
div.photogallery ul li:hover
{
position:relative;
z-index:5; /* place this image on the top */
}
div.photogallery ul li img
{
width:100%; /* img takes up full width of containing li */
padding-bottom:10px; /* push text down a bit */
}
/* Additional styles to give the images a drop shadow */
div.photogallery ul li
{
box-shadow:0 3px 6px rgba(5,5,50,.5);
}
div.photogallery ul li:hover
{
box-shadow:0 3px 6px rgba(35,35,0,.8);
}
/* Additional style to scale the hovered image */
div.photogallery ul li:hover
{
transform:scale(1.25);
}
</style>
</head>
<body>
<div class="photogallery">
<ul>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
</ul>
</div>
</body>
</html>
The following example displays a photo gallery with various transformations.
Example of photo gallery with transformations (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color:#eee;
}
div.photogallery ul li
{
display:inline-block; /* display list items beside each other */
background-color:white;
width:250px; /* width of each image */
text-align:center; /* text under image */
padding:10px;
margin:40px;
}
div.photogallery ul li:hover
{
position:relative;
z-index:5; /* place this image on the top */
}
div.photogallery ul li img
{
width:100%; /* img takes up full width of containing li */
padding-bottom:10px; /* push text down a bit */
}
/* Additional styles to give the images a drop shadow */
div.photogallery ul li
{
box-shadow:0 3px 6px rgba(5,5,50,.5);
}
div.photogallery ul li:hover
{
box-shadow:0 3px 6px rgba(35,35,0,.8);
}
/* Additional styles to place images in a pseudo-random layout */
div.photogallery ul li:nth-of-type(odd)
{
transform:rotate(2deg);
}
div.photogallery ul li:nth-of-type(even)
{
transform:rotate(-3deg);
}
div.photogallery ul li:nth-of-type(5)
{
transform:rotate(1deg);
}
div.photogallery ul li:nth-of-type(10)
{
transform:rotate(0deg);
}
div.photogallery ul li:nth-of-type(3)
{
transform:translate(-3px, -2px);
}
div.photogallery ul li:nth-of-type(7)
{
transform:translate(10px, -15px);
}
div.photogallery ul li:nth-of-type(8)
{
transform:translate(-15px, 10px);
}
/* Additional style to scale the hovered image */
div.photogallery ul li:hover
{
transform:scale(1.25);
}
</style>
</head>
<body>
<div class="photogallery">
<ul>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
</ul>
</div>
</body>
</html>
The following example displays a photo gallery with a transition for the hover effect.
Example of photo gallery with a hover transition (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color:#eee;
}
div.photogallery ul li
{
display:inline-block; /* display list items beside each other */
background-color:white;
width:250px; /* width of each image */
text-align:center; /* text under image */
padding:10px;
margin:40px;
}
div.photogallery ul li:hover
{
position:relative;
z-index:5; /* place this image on the top */
}
div.photogallery ul li img
{
width:100%; /* img takes up full width of containing li */
padding-bottom:10px; /* push text down a bit */
}
/* Additional styles to give the images a drop shadow */
div.photogallery ul li
{
box-shadow:0 3px 6px rgba(5,5,50,.5);
}
div.photogallery ul li:hover
{
box-shadow:0 3px 6px rgba(35,35,0,.8);
}
/* Additional styles to place images in a pseudo-random layout */
div.photogallery ul li:nth-of-type(odd)
{
transform:rotate(2deg);
}
div.photogallery ul li:nth-of-type(even)
{
transform:rotate(-3deg);
}
div.photogallery ul li:nth-of-type(5)
{
transform:rotate(1deg);
}
div.photogallery ul li:nth-of-type(10)
{
transform:rotate(0deg);
}
div.photogallery ul li:nth-of-type(3)
{
transform:translate(-3px, -2px);
}
div.photogallery ul li:nth-of-type(7)
{
transform:translate(10px, -15px);
}
div.photogallery ul li:nth-of-type(8)
{
transform:translate(-15px, 10px);
}
/* Additional style to scale the hovered image */
div.photogallery ul li:hover
{
transform:scale(1.25);
}
/* Additional style to transition when hovering */
div.photogallery ul li
{
transition:0.3s;
}
</style>
</head>
<body>
<div class="photogallery">
<ul>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
</ul>
</div>
</body>
</html>
To make a scattered photo gallery, replace the line display:inline-block; from the div.photogallery ul li style with position:absolute; This will cause all of the images to display on top of each other. A side effect of this is that the bullets for the list items will return. Insert the code display:block; to remove the bullets. By adjusting the various translations, the images can be scattered over the whole screen. Removing the scaling from the hover will cause the hovered image to display at the front of the photo stack. As the selected is simply displayed at the top of the stack, there is no longer any need to have the transition style. An example of a stack of scattered images is shown below.
Example of stack of scattered images (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color:#eee;
}
div.photogallery ul li
{
display:block;
position:absolute;
background-color:white;
width:250px; /* width of each image */
text-align:center; /* text under image */
padding:10px;
margin:40px;
}
div.photogallery ul li:hover
{
z-index:5; /* place this image on the top */
}
div.photogallery ul li img
{
width:100%; /* img takes up full width of containing li */
padding-bottom:10px; /* push text down a bit */
}
/* Additional styles to give the images a drop shadow */
div.photogallery ul li
{
box-shadow:0 3px 6px rgba(5,5,50,.5);
}
div.photogallery ul li:hover
{
box-shadow:0 3px 6px rgba(35,35,0,.8);
}
/* Additional styles to place images in a pseudo-random layout */
div.photogallery ul li:nth-of-type(odd)
{
transform:rotate(20deg) translate(200px, 150px);
}
div.photogallery ul li:nth-of-type(even)
{
transform:rotate(-30deg) translate(100px, 350px);
}
div.photogallery ul li:nth-of-type(3)
{
transform:translate(80px, 200px);
}
div.photogallery ul li:nth-of-type(4)
{
transform:rotate(60deg);
}
div.photogallery ul li:nth-of-type(5)
{
transform:translate(500px, 400px);
}
div.photogallery ul li:nth-of-type(7)
{
transform:rotate(100deg);
}
div.photogallery ul li:nth-of-type(9)
{
transform:rotate(60deg) translate(400px, 150px);
}
div.photogallery ul li:nth-of-type(11)
{
transform:rotate(-40deg) translate(500px, 400px);
}
</style>
</head>
<body>
<div class="photogallery">
<ul>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
<li><a><img src="images/dkit01.gif"></a>First</li>
<li><a ><img src="images/dkit02.gif"></a>Second</li>
<li><a ><img src="images/dkit03.gif"></a>Third</li>
<li><a ><img src="images/dkit04.gif"></a>Fourth</li>
<li><a><img src="images/logo_a.gif"></a>First</li>
<li><a ><img src="images/logo_b.jpg"></a>Second</li>
</ul>
</div>
</body>
</html>
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.