CSS3 Tricks

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

Animated Hovers

Description

The structure of markup is very simple and intuitive. Create a container that will have our image and all the other infomation.

<div class="view view_first">
	<img src="YourImage.jpg" alt="" />
	<div class="mask">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="" class="btn">Button</a>
	</div>
</div>

Add the special class view_first to the element with the class view for the first effect.

In the second hover we will add the special class view-second, but we will leave the element with the class mask empty and wrap the description in a div with the class content

<div class="view view_second">
	<img src="YourImage.jpg" alt="" />
	<div class="mask"></div>
	<div class="content">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="" class="btn">Button</a>
	</div>
</div>

For other hover effects you can use the same HTML structure. You only need to change class view_second to the following ones:
view_third - third effect
view_fourth - fourth effect
view_fifth - fifth effect
view_sixth - sixth effect
view_seventh - seventh effect
view_eight - eight effect

In ninth hover, we will use two mask elements to slide them in from the bottom right and the top left:

<div class="view view_ninth">
	<img src="YourImage.jpg" alt="" />
	<div class="mask mask-1"></div>
	<div class="mask mask-2"></div>
	<div class="content">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="" class="btn">Button</a>
	</div>
</div>

Define .view and .mask width and height which match image`s width and height in style.css file.

CSS3 has a really great potential for creating nice effects. Soon, we’ll hopefully be able to avoid the use of JavaScript for simple effects and rely 100% on CSS, in all browsers.

Animated Buttons

Add necessary class to the <a> tag (<a href="" class=""> Button Text </a>)