In this tutorial, We will create and display images that can rotate if we place the cursor over the image.
We can apply this trick to make our site look more attractive.
Following ways to make the rotating image:
(With the assumption that we will display 6 pictures and we also include the web link it so it looks like the picture menu.)
1. Add the following code into your style.css on your theme.
.rotasi, .rotasi2, .rotasi3, .rotasi4, .rotasi5, .rotasi6 {
width: 64px;
height: 64px;
background: #fff;
float: left;
margin-left: 25px;
padding: 3px;
-moz-rotasi-shadow:0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-rotasi-shadow:0px 0px 8px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.25s ease-in-out;
}
.rotasi2, .rotasi4, .rotasi6 {
position:relative;
z-index: 1;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
}
.rotasi, .rotasi3, .rotasi5 {
position:relative;
z-index: 2;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
}
.rotasi:hover, .rotasi3:hover, .rotasi5:hover, .rotasi2:hover, .rotasi4:hover, .rotasi6:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
z-index: 3;
}
.rotasi a, .rotasi3 a, .rotasi5 a, .rotasi2 a, .rotasi4 a, .rotasi6 a {
width: 50px;
height: 50px;
display:block;
}
2. Upload 6 images into your images store under your theme.
3. Add following code into your file, index.php, home.php or another place what you want.
<div class="rotasi">
<a title="Tutorial WordPress" href="http://de-expert.web.id/category/server/wordpress"><img src="<?php bloginfo('template_directory'); ?>/images-rotation/1.png" alt="" /></a></div>
<div class="rotasi2">
<a title=" Software Gratis" href="http://de-expert.web.id/category/software/free-software"><img src="<?php bloginfo('template_directory'); ?>/images-rotation/2.png" alt="" /></a></div>
<div class="rotasi3">
<a title="Tutorial Outlook Express" href="http://de-expert.web.id/category/software/outlook-express"><img src="<?php bloginfo('template_directory'); ?>/images-rotation/3.png" alt="" /></a></div>
<div class="rotasi4">
<a title="Game Gratis" href="http://de-expert.web.id/category/games"><img src="<?php bloginfo('template_directory'); ?>/images-rotation/4.png" alt="" /></a></div>
<div class="rotasi5">
<a title="Musik Slowrock malaysia" href="http://malay.de-expert.web.id"><img src="<?php bloginfo('template_directory'); ?>/images-rotation/5.png" alt="" /></a></div>
<div class="rotasi6">
<a title=" Berbagai Macam Tutorial" href="http://de-expert.web.id/category/tutorial"><img src="<?php bloginfo('template_directory'); ?>/images-rotation/6.png" alt="" /></a></div>
Finish !!
For Online Demo :
, or you can see modification to match my theme,
You can make modifications as needed to match your theme.
If you are still having trouble in applying the code, please leave a comment.
Hopefully helpful.
Related posts:
