kitesurfing

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.

copytextpop-up

<div class="pro_view pro_view_first">
    <img src="YourImage.jpg" alt="" />
    <div class="pro_mask">
        <h2> Heading </h2>
        <p> Text </p>
        <a href="#" class="pro_btn">Button</a>
    </div>
</div>

<div class="pro_view pro_view_first">
	<img src="YourImage.jpg" alt="" />
	<div class="pro_mask">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="#" class="pro_btn">Button</a>
	</div>
</div>

Add the special class pro_view_first to the element with the class pro_view for the first effect.

In the second hover we will add the special class pro_view-second, but we will leave the element with the class pro_mask empty and wrap the description in a div with the class pro_content

copytextpop-up

<div class="pro_view pro_view_second">
    <img src="YourImage.jpg" alt="" />
    <div class="pro_mask"></div>
    <div class="pro_content">
        <h2> Heading </h2>
        <p> Text </p>
        <a href="#" class="pro_btn">Button</a>
    </div>
</div>

<div class="pro_view pro_view_second">
	<img src="YourImage.jpg" alt="" />
	<div class="pro_mask"></div>
	<div class="pro_content">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="#" class="pro_btn">Button</a>
	</div>
</div>

For other hover effects you can use the same HTML structure. You only need to change class pro_view_second to the following ones:
pro_view_third - third effect
pro_view_fourth - fourth effect
pro_view_fifth - fifth effect
pro_view_sixth - sixth effect
pro_view_seventh - seventh effect
pro_view_eight - eight effect

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

copytextpop-up

<div class="pro_view pro_view_ninth">
    <img src="YourImage.jpg" alt="" />
    <div class="pro_mask pro_mask-1"></div>
    <div class="pro_mask pro_mask-2"></div>
    <div class="pro_content">
        <h2> Heading </h2>
        <p> Text </p>
        <a href="#" class="pro_btn">Button</a>
    </div>
</div>

<div class="pro_view pro_view_ninth">
	<img src="YourImage.jpg" alt="" />
	<div class="pro_mask pro_mask-1"></div>
	<div class="pro_mask pro_mask-2"></div>
	<div class="pro_content">
		<h2> Heading </h2>
		<p> Text </p>
		<a href="#" class="pro_btn">Button</a>
	</div>
</div>

Define .pro_view and .pro_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>)