Fancy Image Gallery with CSS3

Fancy Image Gallery with CSS3

We will use CSS3 to make an image gallery with animation.

 

HTML Structure

First of all, we will create an HTML file with the structure below, which is a div tag with gallery as ID that has an unordered list with each item containing two images. The first image is the thumbnail with the class name “mini” and the second one is the image to display when with the mouseover action with the class name “pic”.

Styling with CSS

The second step is styling the div tag that is going to contain the gallery. The property used from CSS3 is box-shadow.

#gallery {
border: 10px solid #1D0C16;
height: 300px;
width: 800px;
margin-left: auto;
margin-right: auto;
overflow: visible;
background: #272229;
/*box shadow effect in Safari and Chrome*/
-webkit-box-shadow: #272229 10px 10px 20px;
/*box shadow effect in Firefox*/
-moz-box-shadow: #272229 10px 10px 20px;
/*box shadow effect in IE*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);    
/*box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow: #272229 10px 10px 20px;
}

This margin given to the unordered list sets the position in the center of the div.

#gallery ul{
/* This position the ul content in the middle of the gallery*/
margin-left:-30px;
}

Now to each item of the unorded list we eliminate the list style and give a padding of 10 pixels for better appearance and display inline-table to fix the position of the image to display with the mouseover.

#gallery ul li {
/* In order to create the proper effect with hover we should use display inline-table
This will display the big picture right next to its thumbnail
*/
list-style:none;
display:inline-table;
padding:10px;     
}

Here is where we create animation with the CSS property transition which is part of the CSS3. The properties from CSS3 used are transition and box-shadow.

/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
#gallery ul li .pic{
/* Animation with transition in Safari and Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.6s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The the opacity to 0 to create the fadeOut effect*/
opacity:0;
visibility:hidden;
position:absolute;
margin-top:10px;
margin-left:-20px;
border:1px solid black;
/*shadow box effect in Safari and Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/*shadow box effect in Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/*shadow box effect in IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/*shadow box effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}

 

Adding the pointer cursor to the thumbnail at the mouseover action.

#gallery ul li .mini:hover{
cursor:pointer;
}

To finish we create the effect of the animated gallery, modifying the opacity and height of the image gradually with the mouseover action.

/* This create the desired effect of showing the image when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
/* width and height is how much the picture is going to growth with the effect */
width:200px;
height:200px;
opacity:1;
visibility:visible;
float:right;
}

Download: http://www.htmldrive.net/items/download/366

Leave a comment