Hide & Show Image Gallery with Pure CSS

In this article, we are going to create a cool looking hide and show image gallery with pure CSS. Initially all the pictures will be hidden inside their titles and appears with a sliding effect after you click. Well, it is very similar to a typical accordion but the difference here is that we are not using even a single line of JavaScript. It is just with pure CSS!

In one of my earlier articles, I have explained how to create a simple image slider where the pictures were stacked in horizontal direction. In this example, the images will be arranged vertically. You can apply this image gallery in an application where you don’t want all the pictures to be instantly visible. Rater you want to create surprises and keep people guessing before they click to view the image.

css-image-viewer

So, before we move on, first have a look what we are going to create today.

CSS hide & show Image Gallery

But as with many of my tutorials, here also I would like to mention it that this effect is not going to work in the older browsers especially IE 8 and earlier. Sorry guys, but if a significant amount of your website traffic uses IE8, this image gallery is not for you. But with all modern browsers, it should work perfectly fine. All the files used in this demo are available for download at the end of this tutorial which you can freely use.

Basic functionality

Can you guess how this effect can be achieved without JavaScript? With CSS, it is easily possible with hover pseudo element if we just want to show the image on mouse rollover and hide when we take out our mouse. But as you can see in this demo, hide and show of pictures toggle with clicks. This is required because we want pictures to be visible until the user clicks at the title once again.

The functionality is similar to html checkbox and we will be using the same here. When the checkbox is selected the image toggles out and becomes visible. Once you clear the checkbox, the image slides in. Now you may wonder where the checkbox is. Well, we will discover it in a little while.

HTML Markup for Image Gallery

Here is the HTML markup for one set of image. Once you know the concept you can include any number of images with same effect.

<div>
   <input type="checkbox" id="check-pic1" />
   <label for="check-pic1">
      &raquo; Look at me!
   </label>
   <div>
      <img src="pic1.JPG" />
   </div>
</div>

Here the complete image set is kept inside the parent div – ‘imagbox’. As you can see, there are three html elements inside this div – a checkbox with ‘toggle’ class, one label with ‘for’ attribute and an image put inside a div.

The most important here is the label with ‘for’ attribute. For those who don’t know, ‘for’ attribute is used along with checkbox and radio buttons. If you define a label with ‘for’ attribute pointing to the ID of checkbox, it becomes clickable and functional like checkbox. Even if you click on this label, it will work as if you have clicked on the checkbox itself. Sounds interesting? Well, this concept is behind all this magic.

CSS Codes for Image Gallery

Moving on to the CSS codes which are pretty interesting!

Let’s start with usual stuffs first. Here is the CSS for imagebox, div inside the imagebox and label for checkbox.

.imageBox
{
color: #FFFFFF;
width: 350px;
margin: 10px auto;
text-align: center;
}
.imageBox div
{
height: 0;
margin: 0;
overflow: hidden;
}

.imageBox label
{
display: block;
background-color: #2E5C8B;
padding: 5px;
cursor: pointer;
box-shadow: 2px 14px 3px -10px #969696;
}

.imageBox label:hover
{
background-color: #3770A8;
}

.toggle
{
display: none;
}

As you will see, the ‘div’ element inside imagebox which contains the picture has height defined as 0 and overflow set to hidden. This makes the image invisible initially. The cursor is defined as pointer for the visitors to know that this is an active (clickable) element. With the label, we are defining a box-shadow. This makes the label appear to be above the images. As always, you should use the vendor prefixes like –moz- and –webkit- before box-shadow for better compatibility. I am not using vendor prefixes here for simplicity.

On hover, the label changes its background color.

We don’t want the checkbox to be visible, so we are setting the display property to none for the ‘toggle’ class. That’s it!

Now, let’s dive into the more interesting parts.

.toggle ~ div
{
height: 0;
margin: 0;
overflow: hidden;
transition: 1s all ease-in;
}

.toggle:checked ~ div
{
height: 400px;
margin: 5px 0 10px 0;
}

.toggle:checked ~ label
{
background-color: #8D2C2E;
}

Do you know why this tilde (~) between toggle and div? Well, this is the sibling Selector.

Sibling selector allows you to define the properties of all the elements at the same level. And the element may not necessarily be adjacent to the parent element.

In the above code, the ‘div’ element which is at the same level as that of ‘toggle’ class will be affected by this rule. So, we are targeting the div which contains the image. For normal state (unchecked) we are setting the height property to zero and overflow to hidden. But at the same time, we are introducing the CSS transition of 1 second to add the animation.

When the checkbox is checked, the height is changed to 400px making the picture appear with animation. The margin of 5px at top is introduced to make the picture appear more realistically below the title. We are also introducing bottom margin of 10px for introducing a gap between the picture and the next title. The last thing we are doing is to change the background color of label when the checkbox is in checked state.

That’s all my friends! Now, you can have as many pictures as you want just by repeating the image sets in html. Just provide the different ID’s of the checkboxes for different pictures. And there is no need to write anything extra in the CSS!

All the files related to this hide & show CSS image gallery can be downloaded from the link below.

Download CSS image gallery files

Feel free to implement the codes in your future projects or modify it as per your wish.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>