facebook-squared twitter-squared rss-squared gplus-squared

Creating simple image gallery Part 1

Written by on 14 May 2014



May 2014



Image Gallery Featured Image

Image gallery is great way to show off your work, you photography skills and you mind wanted to bring in all the memories and present them nicely. This tutorial is divided in to two parts. In part 1 we will be focusing more on the bare bones of image gallery, it’s structure and aesthetic look. Additionally we are going to use an online service [Lorem pixel ][1]as an image placeholder. [1]: http://lorempixel.com “An online image placeholder service” The Second part is much concerned with adding behavior and Interactivity. So let’s start with HTML markup. ### Structuring Gallery Html that we are going would be pretty simple

<div class="container">

We will be using the container to wrap up our entire project.

  padding: 20px;
  margin: 0 auto;

We have centered the container, and gave it black with 10 percent of opacity. Here is the result so far [

State of Image Gallery using html and css][2] [2]: http://technbuzz.com/wp-content/uploads/2014/05/state-1.png   Now let’s add rest of the markup.

<div class="container">
 <div class="thumbs">
 <!-- Fill it with thumbnail images -->
 <div class="full">
 <!-- Fill it with appropriate full image -->

And here is the finished HTML section.

    <img src="http://www.lorempixel.com/150/150/nature/1" alt="" />
    <img src="http://www.lorempixel.com/150/150/nature/2" alt="" />
    <img src="http://www.lorempixel.com/150/150/nature/3" alt="" />
    <img src="http://www.lorempixel.com/150/150/nature/4" alt="" />
    <img src="http://www.lorempixel.com/500/350/nature/1" alt="" />

Let’s see the finished result so far. [

State 2 for Image Gallery using HTML and CSS][3] [3]: http://technbuzz.com/wp-content/uploads/2014/05/state2.png ###  Styling Image Gallery Now we want to place thumbnail images and their full variants side by side so in following style we have given a width and float property to align them properly

.container {
  background: rgba(0, 0, 0, 0.9);
  width: 900px;
  padding: 20px;
  border-radius: 8px;
  margin: 0 auto;
  min-height: 400px;
.container .thumbs {
  width: 40%;
  float: left;

img {
  cursor: pointer;
  border: 2px solid #fff;

.full {
  display: inline-block;

img.in {
  border: 2px solid red;

Interactive Demo for the part 1 of Image Gallery

See the Pen fBxEH by Samiullah Khan (@samiullah1989) on CodePen.6143

We have added red border to the active thumbnail and show it’s full version to the right. Next we’ll add the interactivity, where on click, an image will be swapped. Check back soon for second part of this awesome image gallery.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.