HTML

The first thing we need is an element that will act as a container for the images.

<section id="images">

</section>

Now, we need to create the markup for each image.

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/1.jpeg">

</div>

There’s a div with a class of “image”, along with a title. This title will be what’s contained in the caption on the back of the image. Inside the div, we have the actual image displayed.

Repeat this structure for 8 more images.

<section id="images">


<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/1.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/2.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/3.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/4.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/5.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/6.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/7.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/8.jpeg">

</div>

<div class="image" title="This is random nonsense, this is random nonsense.">

	<img src="images/9.jpeg">

</div>


</section>

That’s all the HTML that’s necessary.

CSS

We’ll start off with some simple styling to make the page look nice. Right now, there’s just a bunch of images stacked vertically on the page. As far as layouts go, it’s not too bad. I’ve seen worse. But in this case, let’s make it a bit easier on the eyes.

body {
background: #eee;	
}

#images {
width: 450px;
height: 450px;
margin: 100px auto 0 auto;

-webkit-box-shadow: 0px 0px 20px 5px #888;
}

A box with a drop shadow on a grey background. Much better. Unfortunately, the images aren’t completely inside it yet.

.image {
width: 150px;
height: 150px;
float: left;
}

This looks nice, but there’s still a few things that need to be added.

.image {
width: 150px;
height: 150px;
float: left;
opacity: 0.9;
-webkit-transition: all 300ms ease;
}

.image:hover {
cursor: pointer;
opacity: 1;
}

That’s all the styles we need for now.

Remember the “title” attribute that each “image” div has? We need a way to put that on the back of each image, and this is where CSS3 psuedo-elements come in. Basically, with only CSS, it is possible to create another element right next to each “image” div we have on the page.

.image:after {
content: attr(title);
}

Now, right after each “image” will be an element with the contents of the “title” attribute inside. However, we also need to position this on the back of each image, and for that we will use CSS3 3D transforms. Before they can be used, the following code needs to be added to the parent element of whatever we’re going to manipulate.

-webkit-perspective: 1000;

Defining perspective is necessary for 3D elements to have… perspective, surprisingly enough. WSC does an excellent job of explaining this.

Without perspective, the elements would look boring and flat when rotating.

#images {
-webkit-perspective: 1000;
width: 450px;
height: 450px;
margin: 100px auto 0 auto;
background: #888;
-webkit-box-shadow: 0px 0px 20px 5px #888;
}

Now the “#images” section is properly set up.

You’ll notice that the “:after” part of each “image” still isn’t in the right spot. Let’s fix this.

.image:after {
content: attr(title);
display: block;
width: 138px;
height: 138px;
padding: 5px;
background: #eee;
border: 1px solid #999;
-webkit-transform: rotateY(180deg) translateY(-153px);
}

Right now, all the pseudo-elements are behind the images – but we can still see them. Paste this code into the “.image:after” part:

-webkit-backface-visibility: hidden;

This makes the backface of it invisible, which allows us to stick it to the back of another element without showing through.

Also, the text looks boring.

font-family: arial;
font-size: 16px;
line-height: 24px;
color: #333;

Better.

So far, for the “.image:after”, you should have the following code.

.image:after {
content: attr(title);
display: block;
width: 138px;
height: 138px;
padding: 5px;
background: #eee;
border: 1px solid #999;
-webkit-transform: rotateY(180deg) translateY(-153px);
-webkit-backface-visibility: hidden;

font-family: arial;
font-size: 16px;
line-height: 24px;
color: #333;
}

Javascript

What do we want to happen when we click on an image? For the image to flip over and reveal the caption underneath. There are several ways to do this, but let’s just use some javascript.

Before we begin, include the jquery library in your code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Now, let’s start.

$(document).ready(function(){

});

This part is necessary so that the code inside only executes when all the elements on the page are fully loaded.

Let’s think this through; we want something to happen when an image is clicked.

$('.image').click(function(){

});

We want it to switch back and forth between being rotated 180 degrees around the Y axis and being rotated 0 degrees around the Y axis. For this, we’ll use the HTML5 “data-” attributes capability. Part of HTML5 is that it is now perfectly acceptable to define a custom attribute beginning with “data-”, such as “data-flipped”, which is what we’ll use. In here, we’ll store whether or not that particular element is flipped.

$('.image').click(function(){
	var flipped = $(this).attr('data-flipped');
});

We can now use this to check if the element is flipped or not.

if(flipped=='yes'){	
	$(this).attr('data-flipped','no');
}
else {
	$(this).attr('data-flipped','yes');			
}

If it isn’t flipped, it is after being clicked. If it was, now it isn’t. Simple. However, this doesn’t actually make the thing flip. Let’s fix that.

if(flipped=='yes'){	
	$(this).attr('data-flipped','no');
			
	$(this).attr('style','-webkit-transform: rotateY(0deg);');
}
else {
	$(this).attr('data-flipped','yes');
			
	$(this).attr('style','-webkit-transform: rotateY(-180deg);');
			
}

Done. Here’s all the code you should have:

$(document).ready(function(){
	
	$('.image').click(function(){
		var flipped = $(this).attr('data-flipped');
		
		
		if(flipped=='yes'){	
			$(this).attr('data-flipped','no');
			
			$(this).attr('style','-webkit-transform: rotateY(0deg);');
		}
		else {
			$(this).attr('data-flipped','yes');
			
			$(this).attr('style','-webkit-transform: rotateY(-180deg);');
			
		}
	
	});
	
});

At this point, you should have a working image gallery with flipping images and captions. I hope you enjoyed creating this, and that you learned something today. As always, the comment section is below if you have any questions or… well, comments.

You’ll need to download the files if you want the images in the demo, or you can just dig up some of your own images.

HTML

The HTML here is extremely basic, with just a container element and 9 images inside.

<section id="images">

<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">

</section>

This is all you need.

CSS

The CSS is where it gets a bit more interesting. First of all, we have to style the container div so that it sits in the center of the page.

#images {
width: 600px;
margin: 0 auto;
margin-top: 50px;
}
1

We'll need to add some basic styles to the "img" element.
1
#images img {
float: left;
opacity: 0.8;

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}

Each image has a lower opacity to start off with and will animate its properties. The “float: left” is just for layout purposes.

Now, we have to actually create the CSS effect itself. Here’s how this works: When we hover over the #images container, we’ll style all of the images inside to animate to a lower opacity. We’ll also add a hover style to the “img” element so that its opacity becomes higher. This way, the hovered image will be the focus of the page.

#images:hover img {
opacity: 0.7;
}

#images img:hover {
opacity: 0.85;
}

#images:active img{
opacity: 0.65;
}

#images img:active {
opacity: 0.9;
}

As you can see, there are 4 different states for an image: Default, hovered, when another image is hovered, and active.

This creates an interesting effect, and with only CSS3! This method is also useful because it gracefully degrades in older browsers. Users with older browsers won’t get the cool effect, but they will still have all the functionality.

HTML

The HTML here is very, very simple. It’s just a “ul” with some “li”s and links inside, as well as a “slider” div.

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
<div id="slider"></div>
</ul>

This is all you need.

CSS

The CSS for this is very reusable. It’s very easy to just copy-paste this into your CSS file and have it working almost instantly, since all you need is just an unordered list, which is the format most nav menus follow.

First off, we’ll just give the “body” a simple grey background.

body {
background: #fbfbfb;
}

Now, we can style the “nav”.

#nav {
background: white;
border: 1px solid #CACACA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 3px 1px #ebebeb;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;	
height: 40px;
width: 400px;
margin: 0 auto;
margin-top: 50px;
position: relative;
}

Most of the stuff in there is purely for visual purposes, but one thing is necessary – the “position: relative”. Since our “slider” div will be “position: absolute”, we need it to be positioned “relative” to the nav.

Now, we just add some styles to the list items and the links inside.

#nav li {
float: left;
width: 100px;
height: 40px;
text-align: center;	
}

#nav li a {
color: #717171;
font-family: Arial;
font-size: 16px;
line-height: 40px;
display: block;
width: 100px;
height: 40px;
}

This is just for appearances, you can put whatever you want for these two elements.

The last thing we need to style is the “slider” div.

#slider {
left: 0px;
position: absolute;
top: 35px;
height: 5px;
background: #717171;
width: 100px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}

Once again, most of this is just for appearances, but there are a few necessary things in here. First of all, “position: absolute”. This allows us to put the div anywhere we want inside the “nav” without affecting any of the other elements. We also give it some CSS3 transition styling so that it smoothly animates to wherever we want it to be. One last thing about this div – it will animate back to whatever the “left” value originally is. Here, the “left” value is set to “0px”, so whenever the user hovers off of the menu, the “slider” div will move underneath the very first menu item. If you set the “left” value to be for example “100px”, the “slider” div will animate back to the second menu item when the user hovers off of the menu. This can be used to signal which is the currently active page.

Now, we can add the functionality to all this.

#nav li:nth-child(1):hover ~ #slider {
left: 0px;
}

#nav li:nth-child(2):hover ~ #slider {
left: 100px;
}

#nav li:nth-child(3):hover ~ #slider {
left: 200px;
}

#nav li:nth-child(4):hover ~ #slider {
left: 300px;
}

Boom. That’s it. Here’s how it works. When you hover over an “nth-child” of the “nav” menu, we use the “~” CSS selector to select the adjacent “slider” div and give it a new “left” value. The purpose of the “~” is to select any element that is after the first element. In our case, the “slider” is after each child of the “nav”, so we use the “~” to select it.

I hope you learned something useful from this tutorial. If you have any questions or comments, feel free to post them below.

Demo:

HTML

All you need is the HTML for checkboxes and radio buttons:

<input type="checkbox" id="checkthis">

<input type="radio" name="radiobutton" id="radio1">
<input type="radio" name="radiobutton" id="radio2">

Feel free to make your own wrapper HTML around this.

CSS

The CSS is slightly more complicated than the HTML.

First of all, we’ll need a very important line of CSS.

input[type=checkbox],input[type=radio] {
-webkit-appearance:none;
}

This basically “resets” the checkboxes and radio buttons, which means it discards all the styles the operating system and the browser place on them. You’re left with nothing at all, which is why we have to build from the ground up.

Now, we can continue with the basic styles for both checkboxes and radio buttons.

input[type=checkbox],input[type=radio] {
-webkit-appearance:none;
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:3px solid #d5d5d5;
display:inline-block;
width:18px;
height:18px;
-webkit-border-radius: 3px;
vertical-align:text-top;
padding: 0;
}

Most of the styles are self-explanatory. No padding, a background, a border, a border-radius. However, the “vertical-align:text-top” helps out with positioning the check box or radio box. Try deleting this line and see what happens; the checkboxes or radio buttons move, and change the layout.

We also need to add a simple style rule to change the border color on hover. This makes the checkboxes/radio buttons more interactive.

input:hover {
border:3px solid #c5c5c5;
}

Next, we can style the “checkmark” inside the checkbox when it’s checked.

input[type=checkbox]:checked:after {
content:"\00a0";
display:block;
width:3px;
height:6px;
border:solid #a5a5a5;
position:relative;
left:4px;
top:1px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
border-width:0 2px 2px 0;
}

Here, “content:”0a0″ is just hex code for a non-breaking space. Now, the rest of this is CSS for a checkmark. We create a rectangle with different border widths, and rotate it 45 degrees. The result is a checkmark that is just as good as a default OS checkmark.

Now, we can move on to the radio buttons.

input[type=radio] {
-webkit-border-radius:50%;
}

This code makes the radio buttons round.

Now, we have to style the “:checked” radio buttons.

input[type="radio"]:checked:after {
content:"\00a0";
display:block;
position:relative;
left:1px;
top:1px;
height:10px;
width:10px;
background:#a5a5a5;
-webkit-border-radius:50%;
}

Here, we have a circle that just barely fits inside the radio button. It also has a border-radius of 50% to make it round no matter the size.

Ta-da! You should now have some pretty awesome looking checkboxes and radio buttons. Really, the trick here is to use “-webkit-appearance: none”. If you have any questions or comments, feel free to use the commment section below.

Today, I’ll go over the 4 main different types of transforms:

• Scale
• Rotate
• Translate
• Skew

Scale

This CSS3 value for the “transform” property allows you to change an element’s size without changing the “width” or the “height” properties.

Use it like so:

-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

The value inside the parenthesies is how much the element will be scaled. Also, notice the vendor prefixes. These are enough to cover any modern browser, so feel free to copy-paste this code.

There are also “scaleX” and “scaleY” values. As you might imagine, the “scaleX” property allows you to stretch the element horizontally, and the “scaleY” property can stretch the element vertically.

-moz-transform: scaleX(1.5);
-webkit-transform: scaleX(1.5);
-o-transform: scaleX(1.5);
-ms-transform: scaleX(1.5);
transform: scaleX(1.5);

Rotate

The rotate value allows you to rotate the element(surprisingly). Use it like so:

-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);

This code will rotate an element 180 degrees. Of course, you can change the value to be whatever you want.

Translate

The translate property allows you to move an element along the X or Y axis. Much like the “scale” property, there are 3 different ways this can be used:

• translate(X value, Y value)
• translateX(X value)
• translateY(Y value)

Here’s an example of using the “translate” value:

-moz-transform: translate(50px, 50px);
-webkit-transform: translate(50px, 50px);
-o-transform: translate(50px, 50px);
-ms-transform: translate(50px, 50px);
transform: translate(50px, 50px);

This code will move the element 50px to the right and 50px down. With the translate property, the Y value actually moves the element down. So, if you say: “translateY(50px)”, the element will move down 50px rather than up.

Skew

The skew value allows you to turn the element in a given angle. This one is pretty hard to explain, but after you try it yourself, you’ll understand.

-moz-transform: skew(20deg, 20deg);
-webkit-transform: skew(20deg, 20deg);
-o-transform: skew(20deg, 20deg);
-ms-transform: skew(20deg, 20deg);
transform: skew(20deg, 20deg);

Like the others, there are 2 other ways to do this: “skewX” and “skewY”. For example, “transform: skewX(30deg)”.

That concludes this post; if you have any questions or comments, feel free to comment!

HTML

Yes, believe it or not, you are going to need to need some HTML before you can start using CSS3.

<div id="featuredposts">	
	
	<section id="lefttitles">
		<ul>
			<li>
				<a href="#post1">
				<img src="test1.jpg">
				<h3 class="leftheader">CSS3 Image Gallery</h3>
				</a>
			</li>
			
			<li>
				<a href="#post2">
				<img src="test1.jpg">
				<h3 class="leftheader">CSS3 Accordion</h3>
				</a>
			</li>
			
			<li>
				<a href="#post3">
				<img src="test1.jpg">
				<h3 class="leftheader">CSS3 Hover effect</h3>
				</a>
			</li>
			
			<li>
				<a href="#post4">
				<img src="test1.jpg">
				<h3 class="leftheader">Jquery Search</h3>
				</a>
			</li>
			
			
		</ul>
	</section>
		
	<section id="bigview">
	
		<ul>
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
		</ul>
		
	</section>
	
</div>

The div with an id of “featuredposts” is basically the main container div. It holds all of our content. The section with an id of “lefttitles” is what holds the left part of the widget. In other words, it contains the 4 titles and their respective thumbnails. The “bigview” section contains the post that the user has just clicked on.

However, since we’re using “:target” to make the widget interactive, we’re going to need some dummy divs that will just hold the content and make us be able to “:target” it.

<section id="bigview">
	
	<div id="post1">
	<div id="post2">
	<div id="post3">
	<div id="post4">
	
		<ul>
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
			<li>

			</li>
			
		</ul>
			
	</div>
	</div>
	</div>
	</div>
		
	</section>

Wonderful. We’re almost done with the HTML. One last thing: the “bigview” actually needs some content.

<section id="bigview">
	
	<div id="post1">
	<div id="post2">
	<div id="post3">
	<div id="post4">
	
		<ul>
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">CSS3 Image Gallery</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">CSS3 Accordion</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">CSS3 Hover Effect</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
			<li>
				<img src="test1.jpg">
				<h3 class="bigheader">Jquery Search</h3>
				<p class="text">Odio tortor, in sagittis urna, cras duis sed, augue, lundium et magna vel eros lectus! Enim risus rhoncus, massa turpis! Etiam nunc aliquam enim! Dignissim amet! Sagittis sed vut risus, magna cras in natoque, egestas turpis, in amet eu, integer! Facilisis cursus! Lundium cum vut turpis a montes. Nunc enim, a montes, sociis augue elementum magna nisi, in in massa, integer hac amet, augue porttitor amet, magna ac, dis lacus. Cum in? Adipiscing cras vel proin integer et augue habitasse nunc nisi egestas urna? Ut tristique aenean egestas nascetur sed, integer, sagittis nisi scelerisque elementum, elit? Proin nisi et, ut! Ut ultricies, phasellus dis est velit magnis vel, nunc porta placerat nunc quis turpis, proin sed pellentesque ac, tincidunt, quis.</p>
			</li>
			
		</ul>
			
	</div>
	</div>
	</div>
	</div>
		
	</section>

Just some simple Lorem Ipsum, nothing fancy.

CSS3

Finally, the fun part. First, grab a copy of this wonderful CSS reset. Once you’ve copy-pasted that into your stylesheet, read on.

We’re going to start off with some basic styling.

a {
text-decoration: none;
}

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#featuredposts {
overflow: hidden;
background: white;
border: 1px solid #CACACA;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 3px 1px #ebebeb;
-moz-box-shadow: 0px 0px 3px 1px #ebebeb;
box-shadow: 0px 0px 3px 1px #ebebeb;

width: 800px;
height: 415px;
margin: 0 auto;
margin-top: 100px;
}

Honestly, the only really important things here are the “featuredposts” width, height, and “overflow: hidden: declarations. The “overflow: hidden” is necessary so that the user doesn’t see the other posts until they click on the title.

Now, the “lefttitles” styling.

#lefttitles {
width: 300px;
float: left;
overflow: hidden;
}

#lefttitles a {
color: #515151;
}

#lefttitles li {
padding-top: 15px;
padding-left: 15px;

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
height: 70px;
padding-bottom: 20px;
}

#lefttitles li:hover {
background: #eeeeee;
}

#lefttitles img {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}

.leftheader {
font-size: 20px;
line-height: 70px;
padding-left: 10px;
float: left;
}

The CSS3 here is super basic… padding, margins, and a bit of text styling. There’s also some CSS3 transition code, as well as a “border-radius” declaration.

Now, the “bigview” styling.

#bigview {
border-left: 1px solid #CACACA;
padding-left: 15px;
width: 484px;
float: right;
}

#bigview ul {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}


#bigview li {
height: 415px;
}

#bigview img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 15px;
float: left;
width: 100px;
height: 100px;
}

#bigview h3 {
float: left;
font-size: 28px;
width: 364px;
line-height: 130px;
padding-left: 20px;
}

Once again, CSS3 transitions for the “bigview ul”, so that it appears to “slide” when the user clicks on a title. The image also has a border-radius. Everything else is basic.

Well, we’ve got the layout styling over with. Now, we can make this widget work.

#post1:target ul {
margin-top: 0px;
}

#post2:target ul {
margin-top: -415px;
}


#post3:target ul {
margin-top: -830px;
}

#post4:target ul {
margin-top: -1245px;
}

Remember the “leftitles” section that contains the titles? Well, if you take a look at those, they are all links to “#post” and then a number. This is where the “:target” selector comes in. When a link is clicked, the “ul” animates so that the visible post is changed.

That’s all for this tutorial. If you have any questions or comments, feel free to use the comment form below.

HTML

First, we’ll need some HTML to base our styles on.

<section id="boxes">

<section class="thumb" id="thumb1">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		lorem ipsum dolor
	</div>
</div>
</a>
</section>

</section>

That’s one thumbnail inside a section called “boxes”. In each thumbnail, there’s a picture, and a semi-transparent overlay on top of the picture which contains a few lines of text.

We’ll go ahead and add some more thumbnails.

<body>

<section id="boxes">

<section class="thumb" id="thumb1">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		lorem ipsum dolor
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		sit amet elit
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		posuere interdum porta
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		metus id augue 
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		ultrices sit amet
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		aliquam enim cursus
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		varius nisl et felis
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		facilisis egestas
	</div>
</div>
</a>
</section>

<section class="thumb">
<a href="#">
<img src="images/test1.jpg">
<div class="box">
	<div class="text">
		ultricies eget massa
	</div>
</div>
</a>
</section>

</section>

</body>

That’s all the HTML we need here. Let’s move on to the fun part.

CSS3

First, we’ll define some basic styles that we’ll need to make the page work right.

body {
background: #787878;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#boxes {
width: 750px;
margin: 0 auto;
margin-top: 50px;
}

Now, we’ve got to style the thumbnails. This is where it gets slightly confusing. Here’s how it works: There’s a “thumb” section that contains 2 things: the image, and a “box” div. The image is just an image, and the “box” div is the overlay on top, which also contains the text. Both the image and the “box” div are “position:absolute”. That way, they can fit in the same box with no negative margins, or any other complications like that.

.thumb {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
margin: 25px;
float: left;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
-webkit-box-shadow: 0px 0px 7px 16px #333333;
-moz-box-shadow: 0px 0px 7px 16px #333333;
box-shadow: 0px 0px 16px 7px #555555;
}

.thumb:active {
-webkit-box-shadow: 0px 0px 7px 16px #ffffff;
-moz-box-shadow: 0px 0px 7px 16px #ffffff;
box-shadow: 0px 0px 20px 5px #999999;
}

.thumb img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
position: absolute;
width: 200px;
height: 200px;
}

So, we’ve got the “thumb” section styles, and we’ve also given the image some styles. This is all just to make them look good. However, there is something very important in the code above: the “overflow: hidden” style for the “thumb”. This way, when the text expands, it doesn’t look ugly, and it also doesn’t block the ability to hover on the other thumbs.

.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.95;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
position: absolute;
width: 198px;
height: 198px;
border: 1px solid #313131;
background: #3f3f3f;
}

.thumb:hover .box{
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
}

The “box” styles are just to make it look good. The “thumb” hover state, on the other hand, is quite important. That’s the sole reason it all works. When the user hovers over a thumbnail, the “box” div inside it animates to “opacity: 0″, and becomes twice as big. The result is what you see in the demo: The text expands, and ends up looking great!

HTML

First off, you’ll need some HTML to base the styles on.

<div id="images">

	<section id="thumbnails">

	</section>
	
	<section id="mainimage">
	
		<div id="imageplaceholder"></div>
	
	</section>
	
</div>

There is a main div with an id of “images”. This div is like the container div; it holds all of the content on the page. Then, there is a “thumbnails” section. Surprisingly, it holds the thumbnails. After that, there’s a “mainimage” div. This div holds the main image, which changes depending on what thumbnail is clicked. Inside the “mainimage”, there’s an “imageplaceholder” div. This div will be the one with a “background-image” style applied to it.

<section id="thumbnails">

	<div class="image"> 
	<a href="#test1">
		<img src="images/test1.jpg"> 
	</a>
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test2">
		<img src="images/test2.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test3">
		<img src="images/test3.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test4">
		<img src="images/test4.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test5">
		<img src="images/test5.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test6">
		<img src="images/test6.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test7">
		<img src="images/test7.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test8">
		<img src="images/test8.jpg"> 
	</a>
	</div>
	
	<div class="image"> 
	<a href="#test9">
		<img src="images/test9.jpg"> 
	</a>
	</div>
	
</section>

Yes, that’s a lot of thumbnails. But what kind of image gallery is complete without a lot of thumbnails? Now, notice the fact that there’s a link in every thumbnail, pointing to #test and then a number. This is what powers the whole gallery, since we’ll be using the “:target” pseudo-selector.

<section id="mainimage">
	
	<div id="test1">
	<div id="test2">
	<div id="test3">
	<div id="test4">
	<div id="test5">
	<div id="test6">
	<div id="test7">
	<div id="test8">
	<div id="test9">
	
	
	
		<div id="imageplaceholder"></div>
	
	
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	
</section>

Yes, that’s scary, I’ll admit – but I never said this was going to be semantic, right? Each div has an id of “test” and then a number. That corresponds with the “hrefs” in the thumbnail links.

Now that we’re done with the simple and completely non-cluttered HTML, let’s move on.

CSS3

As usual, copy-paste Eric Meyer’s CSS reset first. Once you’ve done that, keep reading.

body {
background: #f8f8f8;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#images {
padding-top: 100px;
width: 880px;
height: 440px;
margin: 0 auto;
}

#thumbnails {
float: left;
width: 440px;
margin-top: 20px;
}


#mainimage {
float: right;
width: 430px;
height: 430px;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
padding: 5px;
}

#mainimage img {
width: 430px;
height: 430px;
}

That was just the basic layout styling. The whole thing has a width of 880, and both sections are 440px wide. There’s also some border-radius and box-shadow styling.

.image {
opacity: 0.8;
position: relative;
float: left;
background: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px 1px #989898;
-moz-box-shadow: 0px 0px 3px 1px #989898;
box-shadow: 0px 0px 3px 1px #989898;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
padding: 5px;
width:90px;
height: 90px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
}

.image img {
width: 90px;
height: 90px;
}

.image:hover {
cursor: pointer;
opacity: 1;
z-index: 5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

There’s a lot of styling going on for the thumbnails. However, aside from the transitions, the most important part is the hover state. Notice the CSS3 transform. Here, we’re using the scale option, which takes the element and resizes it with the element’s center as the point of reference.

#imageplaceholder {
background: url('images/test1.jpg');
background-size: 100%;
width: 430px;
height: 430px;
}

This has a background image styling, which will change depending on what thumbnail was clicked.

#test1:target #imageplaceholder{
background: url('images/test1.jpg');
}

#test2:target #imageplaceholder{
background: url('images/test2.jpg');
}

#test3:target #imageplaceholder{
background: url('images/test3.jpg');
}

#test4:target #imageplaceholder{
background: url('images/test4.jpg');
}

#test5:target #imageplaceholder{
background: url('images/test5.jpg');
}

#test6:target #imageplaceholder{
background: url('images/test6.jpg');
}

#test7:target #imageplaceholder{
background: url('images/test7.jpg');
}

#test8:target #imageplaceholder{
background: url('images/test8.jpg');
}

#test9:target #imageplaceholder{
background: url('images/test9.jpg');
}

When each thumbnail is clicked, a “#test” and then a number are added to the url. The CSS3 “:target” selector checks the url, and when the url contains the name of the element with the “:target” selector, the styles are applied. In this case, the background image is different depending on what the url is.

That’s it. I hope you enjoyed this post, and if you have any questions or comments, feel free to use the comment section below.

CSS3 Gradient Generator by Damian Galarza

This generator is a simple way to create simple gradients. Keep reading if you’re looking for something more advanced.

Ultimate CSS Gradient Generator

This is a powerful Photoshop-like gradient editor from ColorZilla. If you’re looking to create a complex gradient, or you’re just used to the Photoshop interface, this is the generator for you.

CSS Button Generator

A great way to create CSS buttons. The default button already looks great, but if you’re looking to customize it for your own needs, this generator has what you need.

CSS Button Creator

This is a more complex version of the CSS Button Generator above. If you’re looking for something more advanced with more options, this is the button generator for you.

Border Radius

A nicely designed website that simplifies the task of creating rounded corners. What more could you possibly need?

CSS3 Generator

This has it all. Transitions, animations, border radius, RGBA… you name it, this has it. I personally use this one all the time for transitions, but that’s certainly not the only thing it does.

HTML

Before we can start animating things in CSS3, we have to have a solid HTML foundation. Now, take a look at this code:

<section class="imagebox" id="imagebox1">

	<img src="images/img1.jpg" alt="Image 1.">
	
	<div class="slidingbox" id="slidingbox1">
		<h3>Image 1</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>

There’s an HTML5 “section” element that holds everything necessary for the image hover effect: an “img” and a div with a class of “slidingbox”. The div is what slides onto the image.

Here’s the code for the other two sections:

<section class="imagebox" id="imagebox2">
	
	<img src="images/img2.jpg" alt="Image 2.">
	
	<div class="slidingbox" id="slidingbox2">
		<h3>Image 2</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>


<section class="imagebox" id="imagebox3">
	
	<img src="images/img3.jpg" alt="Image 3.">
	
	<div class="slidingbox" id="slidingbox3">
		<h3>Image 3</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>

However, since we want the images to be centered on the page, wrap all three sections in a “container” div.

<div id="container">

<section class="imagebox" id="imagebox1">

	<img src="images/img1.jpg" alt="Image 1.">
	
	<div class="slidingbox" id="slidingbox1">
		<h3>Image 1</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>


<section class="imagebox" id="imagebox2">
	
	<img src="images/img2.jpg" alt="Image 2.">
	
	<div class="slidingbox" id="slidingbox2">
		<h3>Image 2</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>


<section class="imagebox" id="imagebox3">
	
	<img src="images/img3.jpg" alt="Image 3.">
	
	<div class="slidingbox" id="slidingbox3">
		<h3>Image 3</h3>
		<p>Lorem ipsum dolor sit amet, consectur amet sit dolor ipsum lorem.</p>
	</div>
	
</section>

</div>

A simple HTML page. Now that we’ve got that, we can move on to the CSS3 part of this tutorial.

CSS3

First off, some simple styling of the body element and the “container” div.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#container {
width: 1050px;
margin: 0 auto;
margin-top: 150px;
}

We have a good looking page with some basic text styling. Now, we’ll style the image boxes.

.imagebox {
-webkit-box-shadow: 0px 0px 3px 3px #aaaaaa;
-moz-box-shadow: 0px 0px 3px 3px #aaaaaa;
box-shadow: 0px 0px 3px 3px #aaaaaa;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

overflow: hidden;
position: relative;
z-index: 1;
float: left;
margin-left: 25px;
margin-right: 25px;
width: 300px;
height: 300px;
}

There’s a width and a height, some margins to seperate it from other image boxes, and some CSS3. However, the most important parts of this are the “position: relative”, the “z-index”, and the “overflow: hidden”. We need the position: relative so that we can give the element a z-index. We need the z-index so that the image is below the sliding box that goes on top of it, and we need the overflow: hidden so that the sliding box isn’t always visible.

This next CSS is just to give the image rounded corners:

.imagebox img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}

Now, we’re going to style the “sliding boxes”.

.slidingbox {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
z-index: 2;
margin-top: -7px;
width: 280px;
height: 280px;
padding: 10px;
background: rgba(33,33,33,0.7);
color: #ffffff;
}

Notice the CSS3 transitions. These are extremely important if you want the boxes to actually slide onto the image. Next, we have some border-radius declarations, which are for purely aesthetic reasons. We’ve got the “position: relative” and a z-index. This z-index value is higher than the one on the “imagebox”. Because of this, the “sliding box” is on top of the “image box”.

.slidingbox h3 {
font-size: 24px;
}

.slidingbox p {
font-size: 16px;
}

These are just to make the text look nice.

Now, if you removed the “overflow:hidden” from the image boxes, you would see each sliding box right under each image. However, since we want the third sliding box to slide in from the top, we’ve got to position it above the image.

#slidingbox3 {
margin-top:-607px;
}

Wonderful.

Now that all the sliding boxes are in place, we can create the “:hover” states that will allow them to slide in.

#imagebox1:hover #slidingbox1 {
margin-top: -307px;
}

#imagebox2:hover #slidingbox2 {
margin-top: -154px;
}

#imagebox3:hover #slidingbox3 {
margin-top: -307px;
}

Well, that concludes this tutorial. If you have any questions or comments, feel free to use the comment form below.