How to create an impressive image gallery using CSS3?

Image galleries are mostly consist of tons of images with captions and a link with them. Image galleries can be used as porfolio use, photographs posting or screenshot display. No matter for what you use it, I am going to step by step describe how to create a image gallery using CSS3.

Note: I'm going to focus square shapes images as they are easy to handle and fit in container. Further for the use different height of images you need to add plugins like masonry to work with them or you else the layout will be totally  destroyed.

Lets start with a demo

See the Pen Image Gallery by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

HTML

First you need a markup, for markup you need an outer wrapper (gallery in the demo). Secondly, make an outer wrapper for each photo (box in the demo) . Every photo container will have main two elements, that is the image and content (appear on hover).

<div class='gallery'>
<!-- Box for each image -->  <div class='box'>
    <div class='content'>
      <h3><a href='#'>
        Heading
        </a>
      </h3>
      <span class='caption'>Caption</span>
        <span class='label'>Label</span>
    </div>
    <img src='#'/>
  </div>
<!-- Box for each image Ends -->
</div>

CSS

For CSS you need to first analyze your layout, as in my case I've added 4 images at first row with 250px width.That makes the outer wrapper of 1000px. But it may vary according to your needs. Secondly, I've used ease-in effect to appear the content on the box for more transition effect refer this guide.

How content appears on hover?

The content was in a separate div with overflow hidden and height to 0px , that makes that content won't appear. In addition I've added position absolute and make it to the top of the image with no background. Then in hover state the height changes to 200px which is equal to the height of image and background that is achieved is rgba(0,0,0,0.9) which has 10% transparency to feel good.

Position relative and absolute

In box container which holds the content and image have position relative because when the content inside it is set to position absolute,  then it won't go out of the image box but stays right in it.

Read More: Create a simple image gallery with category using Jquery