CSS3 Hover Transition Tutorial

The transition property of CSS3 is by far my favorite property and effect. I know I mentioned it in my article CSS3 for beginners, but I figured I would make an extra effort to tell you a second time.. I also wanted to create my own CSS3 hover transition tutorial that was more unique then the examples I had shown you in css3 for beginners.

In this tutorial I will be creating a decent looking hover over box that has a rotating transition effect when you hover over the image. As you may know CSS3 is not supported by all browsers and this hover over will not function in internet explorer. This tutorial is to demonstrate the capability of CSS3 and to have a little fun.

What We Are Going To Create

First off, lets take a look at the live demo of the rotating hover over boxes which we are going to create.

Did you have a look? Let me know what you think? If you want to learn how to make this awesome transition effect then keep reading..

Like most of my tutorials I am going to assume you have at least a moderate understanding of CSS and HTML, but I will do my best to explain the most important elements as much as I can.

CSS3 hover transition tutorial

1. HTML Markup.

We will start by creating the HTML markup.

Setup a HTML document per usual using the HTML5 doctype “<!DOCTYPE html>”. Without the quotations, insert the code below into your HTML document.

<div class="newhover">
<img src="/3box/images/boxover1.jpg" /> 
<div class="effect">
<h2>Our Services</h2>
<p>Insert your text here. A short description or information for the next page.</p>
<br />
<a class="box1" href="#">Read More.</a>
</div>
</div>

As you can see the html structure is very simple. First we created our container “newhover” then we will use “effect” to make our transition effect and an image hover over.

2. The CSS

Now this looks like a lot of CSS, but it really isn’t, it’s because I had to throw in all the properties for the boxes to function in other web browsers.

Copy this code into your CSS document.

h2 { 
font-family: Verdana; 
color: #fff; 
font-size: 25px; 
background-color: #000; 
line-height: 40px; 
}

p { 
color: #fff;
font-family: Verdana, sans-serif; 
font-size: 16px; 

}

.newhover { 
width: 300px; 
height: 250px;
margin: auto; 
position: relative; 
overflow: hidden;  
}


.newhover img { 
transition: 0.5s; 
-moz-transition: 0.5s; /* Old Firefox */
-webkit-transition: 0.5s;  /* Safari & Chrome */
-o-transition: 0.5s;  /* Opera */
} 


.newhover .effect, .hoverover .content { 
width: 300px; 
height: 250px; 
left: 0;
overflow: hidden;
position: absolute;
top: 0;
} 

.newhover .effect { 
background-color: #29abe2;
transform: translateY(-250px) rotate(0deg); 
-moz-transform: translateY(-250px) rotate(0deg); /* Old Firefox */
-webkit-transform: translateY(-250px) rotate(0deg);  /* Safari & Chrome */
-o-transform: translateY(-250px) rotate(0deg); /* Opera */
opacity: 0.9;
}

.newhover:hover .effect  { 
transition: 0.5s; 
-moz-transition: 0.5s; /* Old Firefox */
-webkit-transition: 0.5s; /* Safari & Chrome */
-o-transition: 0.5s; /* Opera */
transform: translateY(0px) rotate(360deg); 
-moz-transform: translateY(0px) rotate(360deg); /* Old Firefox */ 
-webkit-transform: translateY(0px) rotate(360deg); /* Safari & Chrome */
-o-transform: translateY(0px) rotate(360deg); /* Opera */
} 

.newhover:hover img { 
transform: translateY(-250px) rotate(180deg);
-moz-transform: translateY(-250px) rotate(180deg); /* Old Firefox */ 
-webkit-transform: translateY(-250px) rotate(180deg); /* Safari & Chrome */
-o-transform: translateY(-250px) rotate(180deg); /* Opera */
transition: 0.5s; 
-moz-transition: 0.5s; /* Old Firefox */
-webkit-transition: 0.5s; /* Safari & Chrome */
-o-transition: 0.5s; /* Opera */
}

.newhover:hover p { 
opacity: 1;
}

a.box1 { 
background-color: #000; 
border-radius: 5px; 
color: #fff;
padding: 10px; 
text-decoration: none; 
} 

a.box1:hover { 
background-color: #333;
color: #fff;
text-decoration: underline; 
}
CSS Explanation

Here is a breakdown of the CSS code.

.newhover
is the container for your image hover over. Adjust this to fit your own image size if different.

The transitions in “.newhover img” are the returning transitions, if you notice when you hover off the box the image returns in a rotating effect. If I didn’t use this transition here then there would be no returning effect.

.newhover .effect, .hoverover .content
This is to position the light blue hover over content and effect in the appropriate position.

.newhover .effect
This is the most important element, this is what pushes the blue hover box off the screen using the “translateY()” property. I also added in the rotate property for the 360 effect, but if you noticed it is set to 0 deg, this is something that is required for the 360 spin to work properly. I added the 360 to the hover element below. I also adjusted the opacity of the blue box to opacity: 0.9;

.newhover:hover .effect
This is what creates the 360 rotating effect using the property “transform: rotate(360deg)”. The translateY(0px) tells the blue box where to position itself when the hover over is taking effect it is set to 0 because it is actually returning it to it’s original position. I also set the transition to 0.5s so you can see it take effect, you can adjust this to a speed of your choice.

.newhover:hover img
This is the effect of the image itself not the blue box.. As you may have noticed the image rotates upwards too and returns using a rotation when you hover off the box. I only used a rotating effect of 180degrees to slow it down a little. You can adjust this to your own preferences.

.newhover:hover p
I set this to opacity: 1; because the blue box was 0.9 and I wanted the text to stand out from the box.

The rest of the elements are basic and standard css. If you have any questions please let me know.

Now you have a cool css3 hover transition you can use on your own website. Thanks for reading and stay posted by subscribing to our newsletter.

Author: Jake

Share This Post On

2 Comments

  1. hi there, iam rishabh, a 16 year old living from India
    I must say , this is damn useful for learning 😀 can i tweak the code a bit and use it for designing my website

    Post a Reply
    • Hey Rishabh, yes sure you can tweak it! Have fun..

      Post a Reply

Trackbacks/Pingbacks

  1. 35 Fresh CSS3 Tutorials and Techniques - [...] CSS3 Hover Transition Tutorial [...]
  2. 22 Best CSS Transition Tutorials - Design Sparkle - […] CSS3 Hover Transition Tutorial […]
  3. CSS3 animation - Web Addicts - […] So we briefly used the rotate method in the second tutorial. If you would like to learn how to…

Submit a Comment

Your email address will not be published. Required fields are marked *