CSS3 Gallery Grid with Lightbox

April 15, 2015

Keshia Brown

Keshia Brown

I’ve been playing around with concepts for a simple yet engaging CSS3 gallery grid. So far, i’ve come up with a gallery grid that uses CSS3 transforms and transitions to present gallery items in a lightbox format.
(This tutorial takes advantage of the Twitter Bootstrap framework but i won’t be explaining how that works, for more information visit HERE.)

First, the HTML:

html
– Create a div with an id of gallery, this will contain all of the gallery items.
– Inside the gallery div, create another div with the class of  grid.
– Then, open up an tag, give it a class called thumb and an href file path to the image.
– Inside the a tag, create another div with a class of text-overlay.
– Inside the text-overlay div, add an h1 tag with the image’s description.
– (I’m using the Bootstrap framework for this so all grid divs are placed in seperate col-md-3’s)

Next, the CSS:

css1
– Give the .grid div padding: 0 (so all gallery images sit tight together, this is optional) and overflow: hidden; (which ensures that our images display correctly when we handle the hover later).

– Next, give .grid a img a max-width: 100% for the sake of Bootstrap, it keeps the columns in a row rather than all over the page. Now the fun begins: sticking with .grid a img, add transition: all 500ms; this will come in good use for the next part when we hover over the image (all specifies that all properties will get the effect and 500ms specifies how many milliseconds the transition effect will take to complete). Don’t forget to add for -moz-transition and -webkit-transition for Firefox and Chrome users.

– Now, for .grid a img:hover, add transform: scale(1.4):

The transform property adds a 2d transformation to the image, in this instance we are going to give it a value of 1.4, this will stretch the image both vertically and horizontally and ties in with the previous step above. (Again, add -moz-transform and -webkit-transform for Firefox and Chrome).

css4

– For the .text-overlay div,

we first want to add display:none; This way the text-overlay div is not visible until the grid is hovered over (we handle revealing the div later). Then add background-color: rgba(0,0,0,0.55); I used rgba format because I wanted transparency but you could use regular hex or even upload a background image. Next, give it a position: absolute; top: 0; bottom: 0; left: 0; and right: 0; this ensures that the text-overlay div covers the entire image when it is hovered over. Finally I added color: #fff; and text-transform: upercase.

Now, for the image description –

give the h1 tag font-size: 1.9em; and include a media query for devices wit a max-width of 768px and set the h1 font-size: 1.2em; (this is to make it responsive).

– To center the image description we give the .text-overlay h1 tag  postion: absolute; equal bottom and top of 40% and equal left and right of 30%, we then do the same inside a media query also for devices with a max-width of 768px to ensure that it remains responsive. (Note, the percentages might need adjusting to suit your needs).

css3

Now for the lightbox effect –

If you remember our html code, you will note that we didn’t include a div for our lightbox popout, this is because we will insert it via jquery later. For now, we can style our div.

– For our #fullscreen div, we first want to give it position: fixed; this ensures that when the div is visible, it is fixed in place. Then, set top anf left to 0, width: 100% and height 100% so that it takes up the full screen size and set the background colour to what ever you want. Again, I used an rgba format but you could use an background image or regular hex colour.

– Next, our lightbox image needs to be responsive so set #fullscreen img to max-width: 100%;

– We are going to include some text in our lightbox popout so lets style that.

And finally, a block of JQUERY to handle the lightbox effect :

js

– First, add  document.ready to wrap our code inside of

jQuery(document).ready(function($) {

});

– Next, we want to open up a function on the image click event inside of the document.ready, so create a function for the .thumb (we gave our images this class)

$(‘.thumb’).click(function(event) {

});

– Inside the click event function, we first want to stop the image from opening in another page, to do this we add event.preventDefault();

– Next, we want to get the href file path of the image that has been clicked. Add var image_href = $(this).attr(“href”);

– Now, create an if else statement to handle the fullscreen (our lightbox) div insertion

if ($(‘#fullscreen’).length > 0) { // #fullscreen exists

//The line below will insert an img tag and use the clicked images href as the src value
$(‘#content’).html(‘<img src=”‘ + image_href + ‘” />’);

//Show fullscreen
$(‘#fullscreen’).show();
}

else { //#fullscreen does not exist

//This is the HTML mark up for the fullscreen div (we styled it via css already)
var fullscreen =
‘<div id=”fullscreen”>’ +
‘<p>Click anywhere to close</p>’ +
‘<div id=”content”>’ + //insert clicked link’s href into img src
‘<img src=”‘ + image_href +'” />’ +
‘</div>’ +
‘</div>’;

//Now we add fullscreen div to the page
$(‘body’).append(fullscreen);
}

//We want to be able to click anywhere on the page to get rid of fullscreen box
$(‘body’).on(‘click’, ‘#fullscreen’, function() {
$(‘#fullscreen’).hide();
});

And that’s a wrap. We now have a gallery grid with css3 transforms and transitions effect and a lightbox style pop out.

See the finished product in action HERE.

Leave a Reply

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