Css 3
CSS transforms and transition properties....
HTML file:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> CSS3 Awesome Aniimation</title>
</head>
<body>
<div class="menu_obj home">
<div class="content">
<h3>Home</h3>
<p><a href="#">Read More</a></p>
</div>
</div>
<div class="menu_obj profile">
<div class="content">
<h3>Profile</h3>
<p><a href="#">Read More</a></p>
</div>
</div>
<div class="menu_obj contact">
<div class="content">
<h3>Contact</h3>
<p><a href="#">Read More</a></p>
</div>
</div>
</body>
</html>
As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. You can either create the images by yourself or use the following images:
 |
| profiles |
 |
| contact |
 |
| HOME |
 |
| Hover |
CSS Style:-
<style>
body
{
{
background:-webkit-gradient(radial,center center,0,center center,1200,from(#BEBEBE),to(black));
}
.menu_obj {
border: 2px solid #104669;
border-radius: 50%;
box-shadow: inset 0 0 5px 3px rgba(11, 51, 74, 0.5), 0 0 2px rgba(7, 48, 74, 1);
float: left;
height: 125px;
margin: 0 10px;
position: relative;
width: 125px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.menu_obj.home { background: #060c12 url(icon-sprites.png) no-repeat center center; }
.menu_obj.profile { background: #060c12 url(icon-sprites2.png) no-repeat center center; }
.menu_obj.contact { background: #060c12 url(icon-sprites3.png) no-repeat center center; }
.content
{
background: #000 url(icon-sprites-hover.png) no-repeat center center;
border-radius: 50%;
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.content h3
{
color: #fff;
cursor: default;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
opacity: 0;
padding: 40px 0 0 0;
text-align: center;
text-shadow: 0 0 10px rgba(43, 149, 205, 1);
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.content p
{
{
font-family: Arial, sans-serif;
font-size: 12px;
margin: 10px;
opacity: 0;
text-align: center;
text-shadow: 0 0 10px rgba(43, 149, 205, 1);
-webkit-transition: all 1.6s ease-in-out;
-moz-transition: all 1.6s ease-in-out;
-o-transition: all 1.6s ease-in-out;
-ms-transition: all 1.6s ease-in-out;
transition: all 1.6s ease-in-out;
}
.content p a
{
color: #999;
text-decoration: none;
}
.content p a:hover
{
text-decoration: underline;
}
</style>
Save your document now and preview it on your browser, you should get the something same like the following image.
.menu_obj:hover
{
{
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1), 0 0px 30px rgba(7, 48, 74, 1);
}
.menu_obj:hover .content {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.menu_obj:hover .content h3, .menu_obj:hover .content p
{
{
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Source:Onlywebpro
