CSS3 Hover Transition Tutorial

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.

Demo | Download

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.

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.

 

Please follow and like us:



Leave a Comment

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