From The Mad Lab – A CSS3 & jQuery based Sliding Door Content Gallery

HB Admin | Mad Lab | 15 Comments

We are back with another issue of the “The Mad Lab” posts. And this time we are mixing CSS3 with a little bit of jQuery to cook up a Content Gallery with images which will utilize the Sliding Door style to reveal more content on each of the gallery items as they are hovered on.

This gallery is a great presentational way to show more content using less screen real estate. A lot of information can be packed in to such a gallery where the content gets revealed to the visitors as they hover their mouse over the gallery items.

The plus factor of this gallery is the fact that we are not limiting the gallery content just to images. We are packing up a lot of information in to this power gallery by arranging a consumable set of visual content blocks made up of images, text, links etc. The gallery is going to be slick and interactive and super simple.

We are going to use the CSS transitions for the sliding actions and are going to use jQuery for adding the mouse hover events so that the gallery is a bit dynamic in accommodating any number of images.

So here is the sliding content gallery

The goal of this session is to build a gallery made up of visual content blocks which will show a grid of images and will respond to the visitor by showing more information about each image on mouse hover.

To make the things appear a bit real, we are going to create a content gallery of some of the previous articles from our HummingBird Designs Blog. We are going to show the lead images associated with each articles as the initial part of each gallery item and make them reveal the title, an intro write-up and a link to the original article when we hover the mouse pointer on each gallery item.

Here is a sneak peek at the finished Sliding Content Gallery.

So without any further waiting let’s get cracking.

Step 1 – The HTML Mark-up

First things First! Let’s create the mark-up for this content gallery as the initial step.

<html>
<head>
<meta charset="utf-8">
<title>The CSS3 Sliding Content Gallery</title>
</head>
<body>
<div id="container">
<ul id="gallery">
<li><img src="./gallery/1.jpg" align="left"> <div><h1>The diverse moods of indian monsoon</h1><p>This post is supposed to provide you with some inspiration for rainy motifs and we will not call this an ultimate collection of best photographs. There are definitely thousands of beautiful rainy photos; feel free to share links to them in comments to this post!</p>
<p>All photos are linked and lead to the sources from which they were taken. Please feel free to explore further works of these photographers on their Flickr collections or their personal sites.</p>
<a href="#">Read this Article</a>
</div></li>
<li> <img src="./gallery/2.jpg" align="left"><div><h1>Sensational Landscape painting by Paul Czanne</h1><p>Paul Cezanne is regarded as one of the original Impressionist painters in the late 19th century. He is considered as the artist who bridged the 19th century Impressionism and 20th century’s modern school of cubism. </p>
<p>All paintings here are courtesy of paul-cezanne.org and each painting is linked to the corresponding page on their website.</p>
<a href="#">Read this Article</a>
</div></li>
<li> <img src="./gallery/3.jpg" align="left"><div><h1>Exotic Travel Print Ads from Incredible India</h1><p>The Ministry of Tourism and the State Tourism agencies in India pursue the travelers to visit by running enchanting advertisement campaigns, which bring together the natural, cultural, traditional and modern day aspects of the each destination. In this edition of the Graphical inspiration we are showcasing some of the finest and beautiful print advertisement campaigns run by the various tourism & government organizations in the country. </p>
<a href="#">Read this Article</a>
</div></li>
<li> <img src="./gallery/4.jpg" align="left"><div><h1>Theory & Demo  of Partial Passwords</h1><p>a practical look at implementing a Partial Password authentication solution using PHP and Javascript. </p>
<p>At the first part of the Workshop we are taking a theoretical look at the technique called 'Partial passwords' and are analyzing the pros and cons of this technique from both the usability and technical viewpoint.</p>
<a href="#">Read this Article</a>
</div></li>
<li> <img src="./gallery/5.jpg" align="left"><div><h1>Captivating Beverages Packages</h1><p>Making the maximum visual impact and creating a unique presence among similar products from competitors is a key factor in boosting sales for any brand. </p><p>In this edition of visual and design inspiration we are showcasing some of the beautifully and creatively crafted beverage bottle packaging, which captures the attention of the consumer by standing out from the crowd.  </p>
<a href="#">Read this Article</a>
</div></li>
<li> <img src="./gallery/6.jpg" align="left"><div><h1>June Wallpaper Calendars</h1><p>Monsoon is here and so is the seasonal calendar pack from HB to celebrate this season of love and romance. </p>
<p>As the first showers of this brand new monsoon washes away the accumulated weight of a hard summer we are happy to bring you the freshness of the rainy season with this assorted set of fresh and crisp calendars. </p>
<a href="#">Read this Article</a>
</div></li>
</ul>
</div>
<div id="msg">The Sliding Content Gallery squeezed out of CSS3 and spiced up with a bit of jQuery</div>
<div id="footer">
<h2>The CSS3 Sliding Content Gallery - by the labs of <a href="http://www.hbirddesigns.com">Humming Bird Media</a></h2>
</div>
</body>
</html>

This is our basic mark-up for the gallery. Here we are packing each item with in the gallery inside an li item. Each gallery item is made up of an image tag and a Div element with headings, text and link elements. This mark up will result in a pretty boring looking page like the screen shot given below.

Step 2 – The Style Sheet

Lets spruce up the visual feel of this page a bit by adding some CSS.

*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;background-image:url('bg.jpg');
}
#container
{
	width:840px;
	height:700px;
	background-color:#000;
	border-top:3px solid #333;
	border-right:3px solid #333;
	border-left:3px solid #333;
	border-bottom:3px solid #333;
	margin:0 auto;
	margin-top:25px;
}
ul#gallery
{
	width:100%;
	z-index:1;
	list-style-type:none;
}
ul#gallery li
{
	background-image:url('paper.gif');
	padding:0;
	list-style:none;
	z-index:1!important;
	text-align:left;
	font-family:"Kaufmann";font-size:17px;color:#333;
	word-wrap:break-word;
	padding:15px;margin:10px;
	height:300px;width:229px;
	float:left;
	position:relative;
}

With this piece of CSS our gallery will resemble the screen given below.

Here the images are falling in to a nice grid pattern, but the content items with in each grid item is peeking out of the gallery and we need to take care of this. Lets add some individual styling too for the elements with in the list items to make the content area look nice.

As first step add the below given line to the ul#gallery li declaration

overflow:hidden;

Add these css too

ul#gallery li img{
position:absolute;
top:15px;left:15px;
z-index:10;-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
ul#gallery li div{
background-color:#ddd;
width:229px;
height:300px;
position:absolute;
top:330px;left:15px;-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
ul#gallery li img:hover
{
cursor:pointer;
}
ul#gallery li div h1{
font-family:"Copperplate";
	font-size:16px;
	color:#000;
	margin-top:10px;
	margin-left:10px;
	font-weight:normal;
	margin-bottom:15px;
}
ul#gallery li div p{
font-family:"arial";
	font-size:11px;
	color:#000;
	padding:5px;text-align:justify;
	margin-left:10px;margin-right:10px;
	font-weight:normal;
}
ul#gallery li div a{
font-family:"arial";
	font-size:12px;
	color:#333;
	padding:5px;float:right;
	margin-left:10px;margin-right:10px;margin-top:15px;
	font-weight:bold;
}

The gallery looks fine now. We have made the DIV elements with in each of the list items to be placed offset from the list item view port, which is visible by adding some absolute positioning. Now we have to bring them back on hover and we are going to do them using CSS transforms.

Before taking care of that lets add some more style declarations for making the page elements look a bit more spicy. The whole CSS up to this point will then look:

@font-face
{
	font-family:'Kaufmann';
	src:url(./Tt0726m_.ttf);
}
@font-face
{
	font-family:'Copperplate';
	src:url(./COPGOTHB.ttf);
}
*
{
	margin:0;
	padding:0;
}
body
{
	text-align:center;background-image:url('bg.jpg');
}
#container
{
	width:840px;
	height:700px;
	background-color:#000;
	border-top:3px solid #333;
	border-right:3px solid #333;
	border-left:3px solid #333;
	border-bottom:3px solid #333;
	margin:0 auto;
	margin-top:25px;
}
ul#gallery
{
	width:100%;
	z-index:1;
	list-style-type:none;
}
ul#gallery li
{
	background-image:url('paper.gif');
	padding:0;
	list-style:none;
	z-index:1!important;
	text-align:left;
	font-family:"Kaufmann";font-size:17px;color:#333;
	word-wrap:break-word;
	padding:15px;margin:10px;
	height:300px;width:229px;
	float:left;
	overflow:hidden;position:relative;
}
ul#gallery li img{
position:absolute;
top:15px;left:15px;
z-index:10;-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
ul#gallery li div{
background-color:#ddd;
width:229px;
height:300px;
position:absolute;
top:330px;left:15px;-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
ul#gallery li img:hover
{
cursor:pointer;
}
ul#gallery li div h1{
font-family:"Copperplate";
	font-size:16px;
	color:#000;
	margin-top:10px;
	margin-left:10px;
	font-weight:normal;
	margin-bottom:15px;
}
ul#gallery li div p{
font-family:"arial";
	font-size:11px;
	color:#000;
	padding:5px;text-align:justify;
	margin-left:10px;margin-right:10px;
	font-weight:normal;
}
ul#gallery li div a{
font-family:"arial";
	font-size:12px;
	color:#333;
	padding:5px;float:right;
	margin-left:10px;margin-right:10px;margin-top:15px;
	font-weight:bold;
}
#msg
{
	clear:both;
	font-family:"Kaufmann";
	font-size:25px;
}
#footer
{
	margin-top:20px;
	font-family:"Kaufmann";
	font-size:17px;color:pink;
}
#footer h2
{
	font-family:"Copperplate";
	font-size:13px;
	color:pink;
	text-shadow:0px 1px #666;
	margin-top:10px;
}

Now it is the time to add some interaction and we are going to add css transforms to move the DIV elements translate back in to the viewable area of the list item and are going to use jQuery to make the event handling a bit more easier.

Step 3 – Making the gallery elements slide and reveal info.

Even though we are making the images and content slide with the help of CSS only, we are using a bit of JavaScript for automating the process of attaching transform codes to all the elements in the gallery with out writing individual CSS declarations for them. So in order to do this we are adding the jQuery library in to our page.

<script type="text/JavaScript" src="jquery-1.4.1.min.js"></script>

We are going to add a hover event hook to each of the gallery elements and are going to add CSS transform codes for making the images and DIV element inside the list item which is getting the hover event translate up to make the image invisible and the content area visible. The transform is reversed on mouse out.

The jQuery Code will be:


$(document).ready(function() {
//Get the number of items in the gallery
galItems = $('#gallery li').size();
for(i=0;i<galItems;i++)
	{
	//SET EVENT HANDLERS for each of the gallery items
	$('#gallery li:eq('+i+')').hover(function(){
	ci =$('#gallery li').index(this); //get which li is hovered
	//Translate the image inside the list item to the upper and outer regions of the list item view port by moving it on -ve y axis so that it is not visible
	$('#gallery li:eq('+ci+') img').css('-o-transform','translate(0,-320px)');
	$('#gallery li:eq('+ci+') img').css('-webkit-transform','translate(0,-320px)');
	$('#gallery li:eq('+ci+') img').css('-moz-transform','translate(0,-320px)');
	$('#gallery li:eq('+ci+') img').css('transform','translate(0,-320px)');
	//Translate the DIV containg the gallery content to the list item view port by moving it on -ve y axis so that it is made visible
	$('#gallery li:eq('+ci+') div').css('-o-transform','translate(0,-315px)');
	$('#gallery li:eq('+ci+') div').css('-webkit-transform','translate(0,-315px)');
	$('#gallery li:eq('+ci+') div').css('-moz-transform','translate(0,-315px)');
	$('#gallery li:eq('+ci+') div').css('transform','translate(0,-315px)');
	},function(){
	//Reverse the positions of both the image and DIV on mouse out
	$('#gallery li:eq('+ci+') img').css('-o-transform','translate(0,0)');
	$('#gallery li:eq('+ci+') img').css('-webkit-transform','translate(0,0)');
	$('#gallery li:eq('+ci+') img').css('-moz-transform','translate(0,0)');
	$('#gallery li:eq('+ci+') img').css('transform','translate(0,0)');
	$('#gallery li:eq('+ci+') div').css('-o-transform','translate(0,0)');
	$('#gallery li:eq('+ci+') div').css('-webkit-transform','translate(0,0)');
	$('#gallery li:eq('+ci+') div').css('-moz-transform','translate(0,0)');
	$('#gallery li:eq('+ci+') div').css('transform','translate(0,0)');
	});
	}
});

The code is pretty self explanatory as we have sprinkled it with comments. We are using jQuery to find the number of items in the gallery. Now using the looping feature of jQuery we are taking each of the items in the gallery and are applying a translation transform on the image and DIV elements to make them move up on the y-axis on hover and the reverse on mouse out.

Now you can see the gallery in all its glory.

The Demo

You can download the code associated with this mad lab project or can take a look at the final gallery from this section.

Conclusion

That’s it. That brings us to an end to our fourth post on ‘The Mad Lab’. This lab session was meant to take a deep look at the CSS3 translational transforms and to make UI ideas, which can pack a lot of information inside a small area of a screen. We will be back with more JavaScript, CSS and HTML crazy ideas in the upcoming editions of this corner.

Rate this post:
Loading ... Loading ...
HB Admin's Gravatar icon

Author: HB Admin

Admin of Humming Bird Designs Blog

102 articles posted by HB Admin.

Related Posts

  1. From The Mad Lab – A CSS3 & jQuery based Japanese Paper Fan Image Gallery
  2. From the Mad Lab – Building a Gallery of Content using Pure CSS
  3. From The Mad Lab – Having Fun by making a pure css image gallery
  4. Avoid unwanted HTML markup for styling a webpage using CSS3 Selectors – Humming Bird Web Developer Classroom – Mastering CSS3
  5. How to make your website flexible across a range of target devices – A Simple Introduction to CSS3 Media Queries
SUBSCRIBE
Enjoyed this post? Subscribe to HB BLOG.

COMMENTS (15)

ADD A COMMENT

Name (required)

Email (required)

Website

Reload Image

Comments