Hello and today i am going to show you how to make a hover effect (transitions) using pure CSS3,no JavaScript!
The codes are below for both CSS and HTML now it depends on you wither you want to use the CSS code internally or externally.You can change the URL of the images to your own but do keep an eye on the height and width,if you have any problems just ask it in the comment section below and stay tuned for more tutorials like this!
DEMO HERE
@charset "utf-8";
/* CSS Document */
#thingy
{
background:url(Downlaods/Pics/g+vsfb.jpg);
width:715px;
height:120px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
The codes are below for both CSS and HTML now it depends on you wither you want to use the CSS code internally or externally.You can change the URL of the images to your own but do keep an eye on the height and width,if you have any problems just ask it in the comment section below and stay tuned for more tutorials like this!
DEMO HERE
---------------------------------------------------------------------------------
HTML
----------------------------------------------------------------------------------
<html>
<head>
<title>Demo</title>
<head>
<title>Demo</title>
</head>
<body>
<h1>
Hover Effect
</h1>
<center>
<div id="thingy"></div>
<p class="thingy2"></p>
<p class="thingy3"></p>
</center>
</body>
</html>
-----------------------------------------------------------------------------------------------
CSS
---------------------------------------------------------------------------------------------@charset "utf-8";
/* CSS Document */
#thingy
{
background:url(Downlaods/Pics/g+vsfb.jpg);
width:715px;
height:120px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-o-border-radius:30px;
transition:height 1.5s;
-webkit-transition:height 1.5s;
-o-transition:height 1.5s;
-moz-transition:height 1.5s;
transition:height 1.5s;
-webkit-transition:height 1.5s;
-o-transition:height 1.5s;
-moz-transition:height 1.5s;
border-style:groove;
}
#thingy:hover
{
height:545px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
}
#thingy:hover
{
height:545px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-o-border-radius:30px;
border-style:groove;
}
p.thingy2
{
background:url(http://www.ii.edu.mk/predmeti/filozofski/Win2000/Image109.gif);
width:715px;
height:120px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-style:groove;
}
p.thingy2
{
background:url(http://www.ii.edu.mk/predmeti/filozofski/Win2000/Image109.gif);
width:715px;
height:120px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
-o-border-radius:30px;
transition:height 1.5s;
-webkit-transition:height 1.5s;
-o-transition:height 1.5s;
-moz-transition:height 1.5s;
transition:height 1.5s;
-webkit-transition:height 1.5s;
-o-transition:height 1.5s;
-moz-transition:height 1.5s;
border-style:groove;
}
p.thingy2:hover
{
height:545px;
-webkit-border-radius:30px;
-o-border-radius:30px;
border-style:groove;
}
p.thingy3:hover
{
height:545px;
-moz-border-radius:30px; -webkit-border-radius:30px;
-o-border-radius:30px;
border-style:groove;
}
p.thingy3
{
background:url(http://img3.bbs.163.com/new/20110406/auto_aaac/xu/xue520_ao/dd8bbfafb9825219849de788fa39fe75.jpg);
width:715px;
height:120px;
}
p.thingy2:hover
{
height:545px;
-webkit-border-radius:30px;
-o-border-radius:30px;
border-style:groove;
}
p.thingy3:hover
{
height:545px;
-moz-border-radius:30px; -webkit-border-radius:30px;
-o-border-radius:30px;
border-style:groove;
}
p.thingy3
{
background:url(http://img3.bbs.163.com/new/20110406/auto_aaac/xu/xue520_ao/dd8bbfafb9825219849de788fa39fe75.jpg);
width:715px;
height:120px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-o-border-radius:30px;
transition:height 1.5s;-webkit-transition:height 1.5s;
-o-transition:height 1.5s;
-moz-transition:height 1.5s;
-o-border-radius:30px;
transition:height 1.5s;-webkit-transition:height 1.5s;
-o-transition:height 1.5s;
-moz-transition:height 1.5s;
border-style:groove;
}
}
--------------------------------------------------------------------------------
After you have done all the steps above it will look like this but with a hover effect!
No comments:
Post a Comment