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>
        <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:#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>
        <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:#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
            {
                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>
        <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:#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
            {
                transform:scaleY(-1);	
            }

            /* Additional styles to make a gradient opacity layer */
            div.reflection
            {
                position:absolute;
                top:100%; 
                left:0px;
            }

            /* Additional style to make a gradient opacity layer */
            div.overlay 
            { 
                position:absolute;
                top:0px; 
                left:0px; 
                width:100%; 
                height:100%;
                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>