Image Reflections

We can use lists and CSS to create a reflected group of photos in a photo gallery.

Copying original Photos

The following example places a copy of the original photo under each photo..

Example of original plus copy of photos in a list (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body
{
  background-color:#fff;  
}

div.photogallery ul li
{
  display:inline-block;  /* display list items beside each other */
  background-color:white;
  width:200px;   /* width of each image */
  text-align:center;  /* text under image */
  padding-bottom:10px;
  margin:40px;
  position: relative;
}

div.photogallery ul li img
{
  width:100%; /* img takes up full width of containing li */
}
</style>
</head>

<body>
<div class="photogallery">
<ul>
   <li><img src="images/dkit01.gif"><img src="images/dkit01.gif">First</li>
   <li><img src="images/dkit02.gif"><img src="images/dkit02.gif">Second</li>
   <li><img src="images/dkit03.gif"><img src="images/dkit03.gif">Third</li>
   <li><img src="images/dkit04.gif"><img src="images/dkit04.gif">Fourth</li>     
</ul>
</div>
</body>
</html>

Inverted Photos

The following example inverts the reflected photos.

Example of photo gallery with drop shadow effect (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body
{
  background-color:#fff;  
}

div.photogallery ul li
{
  display:inline-block;  /* display list items beside each other */
  background-color:white;
  width:200px;   /* width of each image */
  text-align:center;  /* text under image */
  padding-bottom:10px;
  margin:40px;
  position: relative;
}

div.photogallery ul li img
{
  width:100%; /* img takes up full width of containing li */
}


/* Additional style to reflect(invert) an image  */
.reflection img
{
  -webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1); }
</style> </head> <body> <div class="photogallery"> <ul> <li><img src="images/dkit01.gif"><div class = "reflection"><img src="images/dkit01.gif"></div>First</li> <li><img src="images/dkit02.gif"><div class = "reflection"><img src="images/dkit02.gif"></div>Second</li> <li><img src="images/dkit03.gif"><div class = "reflection"><img src="images/dkit03.gif"></div>Third</li> <li><img src="images/dkit04.gif"><div class = "reflection"><img src="images/dkit04.gif"></div>Fourth</li> </ul> </div> </body> </html>

Gradient Opacity Overlay

The following example places a gradient opacity overlay on the reflected images.

Example of gradient opacity overlay (Run Example)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body
{
  background-color:#fff;  
}

div.photogallery ul li
{
  display:inline-block;  /* display list items beside each other */
  position: relative;
  background-color:white;
  width:200px;   /* width of each image */
  text-align:center;  /* text under image */
  padding-bottom:0px;
  margin:40px;

}

div.photogallery ul li img
{
  width:100%; /* img takes up full width of containing li */
}


/* Additional style to reflect(invert) an image  */
.reflection img
{
  -webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1); } /* Additional styles to make a gradient opacity layer */ div.reflection { position:absolute; top:100%; left:0px; } div.overlay { position:absolute; top:0px; left:0px; width:100%; height:100%;
background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); }
</style> </head> <body> <div class="photogallery"> <ul> <li><img src="images/dkit01.gif"><div class = "reflection"><img src="images/dkit01.gif"><div class="overlay"></div></div></li> <li><img src="images/dkit02.gif"><div class = "reflection"><img src="images/dkit02.gif"><div class="overlay"></div></div></li> <li><img src="images/dkit03.gif"><div class = "reflection"><img src="images/dkit03.gif"><div class="overlay"></div></div></li> <li><img src="images/dkit04.gif"><div class = "reflection"><img src="images/dkit04.gif">><div class="overlay"></div</div></li> </ul> </div> </body> </html>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>