How to Create a Fancy Image Gallery with CSS3
March 8th, 2010 by How to Create a Fancy Image Gallery with CSS3
Even though CSS3 is still in the development stages, it is the new craze that many web developers are excited about. CSS3 is something that will take web development into newer and greater heights, while modernizing the web and allowing web designers and developers to make their creativity a reality. CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more. Recently, while talking with colleagues about CSS3 animations, many of them agreed how CSS3 animation is going to replace most of the JavaScript animation once it is supported by all the browsers. However, that is the downside currently to CSS3, because right now the only browsers that support it are Safari and Chrome, even though Opera 10.50 is going to support it soon. Today, I have prepared a tutorial about how to use CSS3 to make an image gallery with animation. I recommend to use one of these browsers to see the animations; however, the gallery is going to be usable in browsers without support of the 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”.
<div id="gallery"> <ul> <li> <img src="images/imagen1_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen1.jpg" class="pic" /> </li> <li> <img src="images/imagen2_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen2.jpg" class="pic" /> </li> <li> <img src="images/imagen3_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen3.jpg" class="pic" /> </li> <li> <img src="images/imagen4_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen4.jpg" class="pic" /> </li> <li> <img src="images/imagen5_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen5.jpg" class="pic" /> </li> <li> <img src="images/imagen6_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen6.jpg" class="pic" /> </li> <li> <img src="images/imagen7_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen7.jpg" class="pic" /> </li> <li> <img src="images/imagen8_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen8.jpg" class="pic" /> </li> <li> <img src="images/imagen9_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen9.jpg" class="pic" /> </li> <li> <img src="images/imagen10_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen10.jpg" class="pic" /> </li> <li> <img src="images/imagen11_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen11.jpg" class="pic" /> </li> <li> <img src="images/imagen12_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen12.jpg" class="pic" /> </li> </ul> </div>
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; }
If you want to pass your CISSP certification with high score, make use of 70-640 dumps and 642-832 practice questions and pass your certification exam on first attempt guaranteed.
Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming and development world, including 2 years teaching computer science. He is currently living in Louisiana, where he plans to complete his degree in Computer Science, and begin a Masters in the field.
Subscribe to our RSS
Please help us to promote this article.
Sponsors
A Leading B2B platform with 10 years history. Compare & Inquire with Trusted China Suppliers (SGS certified). Log on & Order now!
nice tutorial! thanks for sharing
Glad you like it! Thanks!
useful tutorial. CSS3 is going to take over the web
Glad you found it useful. Thanks for the comment!!
Great tutorial! Let’s hope Firefox gets on board with this soon!
Yes, I hope so too! Thanks for the comment!
Agree with all, that this good to make a image gallery but there is a problem, at the beginning its take time to display images…. I thing need some heck to reduce the load time or may be because of this filter: progid:DXImageTransform.Microsoft.Shadow(color=’#272229′
I know what you mean but remember that there is no way to make calls to the server for an image with CSS. The only way is loading all the images at the beginning if we are not going to use JavaScript at all. This would be great for a small e-commerce app where would show the descriptions in a tooltip without the need of JS.
Ingenious concept ( despite that the CSS zoom effect has been developed by Stu Nichols for quite some time ) , I love the way you have designed this gallery incorporating the drop shadow effects making the gallery somewhat 3-D . This is by far one of the best CSS3 galleries I have seen thus far Great job youve done there Taylor
Thank you. That makes me feel really good. I really appreciate your comment! Glad you liked it
Great result!
Thanks for your comment
First off, great article. This one really inspired me, so I took upon myself to tackle a couple of issues that I saw with this example:
For one, it forces a scrollbar with the hovered gallery images ( which may be useful ).
Second, the images are “popping” because you neglected to set the width and height in the img attributes. A lot of people think this is no longer needed (which is some cases it’s not), but every time an image loads, the browser has to reflow the entire page. If you set the width and height attributes, the browser will leave space for the images and not have to reflow the page.
Third, the hovered images are blocking the hover functionality of the other photos. This is bad usability. You can view my example below to see how I resolved this issue.
Fourth, your using the :hover pseudo selector on a list item. Typically you would want to have this functionality on an anchor tag (although with CSS3 that’s completely valid).
Which brings me to #5, there is no way for the user to save the large image! Each “thumbnail” should be linked to the full-size image for downloading. Usually you would disable this functionality with JS if you so wanted to, but the full image should always be available aside from the hover.
You can view my revision here:
http://www.bryanwatson.ca/sandbox/css3gallery/
I’d like to hear everyone’s thoughts on this (including you Teylor), as you can really do some powerful stuff with CSS3 selectors. For example, I’ve used the adjacent selector to trigger the hover effect.
Hey Bryan,
I totally agree with your comment.
Regarding the height and the width (Which I fixed thank you!) of the images, it was a mistake
. I always try to add those attributes in all the images. And YES, I am with the group that thinks that you always need them. In fact, I wrote an article some time ago about this issue.
About the hovered images blocking the hover functionality of the other pictures, I was in fact planning to add a description text when we hover the picture that appears for example the CSS3 Photo-Info from Stu Nicholls , but I decided to leave this for another tutorial. Additionally, I wanted the effect as it is.
In respect to the anchor tag which you refer, I again totally agree with you but once again I think you are going beyond this tutorial. Developers should know that I made the gallery as simple as possible, however in order to implement this gallery in their website I encourage everybody to add any kind of modifications in order to fit their needs.
About the CSS3 selectors you are right; the next time I will use those selectors to accomplish the task, even thought that is more taste and style than mandatory. In fact, I styled a table in CSS Table Gallery using +, which is even better because we use less and less class names.
Thanks for your input!!! And I hope you comment again soon.
Cheers, Teylor Feliz
I just used your code to put up a gallery for my portfolio pictures on my photography website. (I tweeked it a bit to work with either vertical or horizontal photos rather than just square images.) Thank you SO much for this!!!
I am glad that people find this useful.
Thanks for your comment.
have to give a try , i am not so familiar with css, but this ill give it a try as the demo effect so good
thanks man, nice script
glad you liked it!
It’s really nice
, thanks man
Thanks for the comment!
Love CSS3 and this one also. Keep it up!
Thanks Lam, I am glad you like it
I’m almost dissapointed to style my themerious with box shadow for IE. But you showed it in this tutorial how must applied it. So..thank you very much
Hi Teylor.
Very nice a image gallery.
But “CSS3 Image Gallery” shadow don’t working shadow in the IE8
Firefox: http://i49.tinypic.com/35mmghx.png
IE8: http://i50.tinypic.com/20h4tv9.png
[sory my bad Engilish :$ ]
Remember that IE does not support CSS3. In addition, the gallery has the shadow in IE (check the border of the gallery). I did not add shadow to the text of the page because IE create a horrible effect, so I prefer to leave it without it.
Thanks for your comment!
Very nice, but perhaps should use opacity with animation?
Excelente tutorial.
Lo voy a intentar, espero que me resulte.
Gracias.
Un abrazo.
Really good tut. I try it and it was easy to follow.
Thanks a lot !