CSS3 transitions are hands down my favorite feature to play around with. I can’t help but share my excitement about them again. I’ve been inspired to put together my own unique CSS3 hover transition tutorial. This one offers fresh examples that go beyond the basics and give you something new to try out.
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.
Table Of Contents
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.
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="https://develop-a-website.com/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>
<br/>
<div class="newhover">
<img src="https://develop-a-website.com/3box/images/boxover2.jpg"/>
<div class="effect">
<h2>Portfolio</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.
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.
