Look Inside
CSS3 Transitions allow browser to animate HTML elements through the change of CSS properties. In other words, we can create animations in webpage without JavaScript but just with pure CSS.
Today I’m going to use this amazing CSS3 property to create a fancy image gallery with CSS3 transitions. The techniques used are mainly CSS3 transitions combined with CSS :hover pseudo-class. Of course, other CSS properties are still used for styling purpose!
[browser type=”cfs-x”]Please note that the results from this tutorial will only works well in browsers that support CSS3 transitions like Chrome, Safari and Firefox.[/browser]
The Idea
The idea is to have an image gallery that will slightly ‘zoom-in’ with an overlay, and display the image description when hover over, else no overlay created and the description will stay in ‘blur’ effect.
CSS3 Transitions Basic
As usual, before get started with markup let’s go through the basic of CSS3 transitions first. CSS3 Transition supports four different properties, which are property name, duration, easing and delay.
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 1s;
/* Firefox 4 */
-moz-transition-property: width;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease;
-moz-transition-delay: 1s;
/* Safari and Chrome */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 1s;
}
Anyhow, you may group all of them using CSS3 Transition shorthand property.
div
{
transition: width 1s ease 1s;
/* Firefox 4 */
-moz-transition:width 1s ease 1s;
/* Safari and Chrome */
-webkit-transition:width 1s ease 1s;
}
The Basic Markup
We assume that each image will contain few of information like title, description and picture itself of course. Thus, we will create a ‘box’ element called .box to group all image information inside one place.
Also, there will be an overlay when these image boxes are hover over. We will define another element called #overlay.
<!-- ### Begin Image Boxes ### --> <div id="holder"> <div class="box box-1"> <h3>Image1 Title</h3> <div class="image"> <img src="images/1.jpg" /> </div> <div class="description"> Image1 description text goes here... </div> </div> <div class="box box-2"> <h3>Image2 Title</h3> <div class="image"> <img src="images/2.jpg" /> </div> <div class="description"> Image2 description text goes here... </div> </div> <div class="box box-1"> <!-- ... --> </div> <!-- other image boxes --> </div> <!-- ### Begin overlay ### --> <div id="overlay"></div>
And that’s it! Next we will show the CSS markup for this fancy image gallery using CSS3 transitions.
Image Boxes CSS
Each image box will become bigger when hover over and back to normal size when hover out. Well, all of this can simply done by using CSS3 scale transform property bind with CSS :hover pseudo-class. Moreover, with help of CSS3 transitions we can easily create a ‘zooming’ transition on these image boxes.
.box
{
position: relative;
float: left;
margin: 5px 1%;
padding: 10px 2% 15px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #ccc;
z-index: 5;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0 0 3px #ccc;
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
transition:
background-color 1s,
box-shadow 1s,
transform 0.5s;
-moz-transition:
background-color 1s,
-moz-box-shadow 1s,
-moz-transform 0.5s;
-webkit-transition:
background-color 1s,
-webkit-box-shadow 1s,
-webkit-transform 0.5s;
}
.box:hover
{
background-color: #fff;
z-index: 10;
box-shadow: 0 0 15px #333;
-moz-box-shadow: 0 0 15px #333;
-webkit-box-shadow: 0 0 15px #333;
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
.box-1 { max-width: 24%; }
.box-2 { max-width: 44%; }
.box-3 { max-width: 35%; }
The zooming effect will looks more realistic with some shadow spread on image box. =)
If you’re interested in CSS3 Transform, here’s another demonstration of CSS3 3D transforms.
Title Drop Shadow CSS
By changing the CSS text-shadow property, the image title will drop a shadow when the box is hover over.
.box h3
{
margin: 5px 10px;
padding: 5px 10px;
border-bottom: 0 solid #fff;
color: #777;
font-size: 27px;
font-family: 'Arial Narrow', Arial;
letter-spacing: 1px;
text-shadow: 0 1px 1px #ccc;
border-bottom: 0 solid #fff;
transition:
color 1s,
text-shadow 1s,
border-bottom 1s;
-moz-transition:
color 1s,
text-shadow 1s,
border-bottom 1s;
-webkit-transition:
color 1s,
text-shadow 1s,
border-bottom 1s;
}
.box:hover h3
{
color: #333;
border-bottom: 1px solid #aaa;
text-shadow: 1px 1px 1px #fff, 2px 2px 1px #888;
}
Transparency Image CSS
The images will look semi-transparent at the initial stage, and become opaque when the box is selected. This fading transition can be accomplished by changing the CSS opacity property.
.box .image
{
margin: 10px;
opacity: 0.5;
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1s;
}
.box:hover .image
{
opacity: 1;
}
Blurring Text CSS
The task here is to create a ‘blurring‘ description text for each image box. In addition, this description text will become ‘readable’ when the image box is focused. In this case, we will use the shadow blurring tricks from CSS tricks for heading, fonts and text styling.
.box .description, .box .description a
{
color: rgb(153,153,153);
color: rgba(153,153,153,0);
text-shadow: 0 0 5px #aaa;
text-align: left;
font-size: 14px;
transition:
text-shadow 1s ease 0.5s,
color 1s ease 0.5s,
outline 1s ease 0.5s;
-moz-transition:
text-shadow 1s ease 0.5s,
color 1s ease 0.5s,
outline 1s ease 0.5s;
-webkit-transition:
text-shadow 1s ease 0.5s,
color 1s ease 0.5s,
outline 1s ease 0.5s;
}
.box:hover .description, .box:hover .description a
{
text-shadow: 0 0 0 #fff;
color: rgb(100,100,100);
}
/* this will create a nice focus effect on Firefox */
.box:hover .description a
{
outline: 1px dotted #777;
}
Overlay CSS
Last but not least, the overlay CSS. This might be a little bit confused for you. Well, this is how it works!
#overlay
{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 7;
background: rgb(0,0,0);
background: rgba(0,0,0,0.5);
transition: background-color 0.7s;
-moz-transition: background-color 0.7s;
-webkit-transition: background-color 0.7s;
}
#overlay:hover
{
background: rgba(0,0,0,0);
z-index: 0;
}
From the code above, when the overlay is hover over (or image boxes are not hovered), it will become transparent and stay behind the image boxes (controlled by z-index property). While the overlay is hover out (or image boxes are hovered), it will fade in and cover all the image boxes except the one focused.
Enjoy!
That’s all for fancy image gallery with CSS3 transition! I hope you enjoyed this tutorial and find it useful! Still, you may like this post #Fancy Hover Effects with CSS3 Transitions as well! Thanks for reading…