Author Topic: How to Add Slanting Css Hover Effect on a Website Image  (Read 906 times)

0 Members and 1 Guest are viewing this topic.

Offline obasimiracle

  • Support Expert
  • *****
How to Add Slanting Css Hover Effect on a Website Image
« on: May 04, 2013, 02:17:58 AM »
Using css is one of the best ways of building an attractive site, apart from the fact that it reduces your site load time it also goes a long way to optimize your site look and give your brand a brilliant appearance.

The following code will slant your image whenever one mouse-over on your site image. Adding this css does not require any technical skills and uses no javascript whatsoever.

Css Code

Add the following code to your css codes.

Code: [Select]
.img: hover{
-moz-transform:rotate(22.5deg) scale(1.20);
-webkit-transform:rotate(22.5deg) scale(1.20);
}

Customizations:

Edit this scale(1.20); rotate(22.5deg) to change the scale of the image rotation.

If you are using a cms platform like Oxwall, Wordpress, Phpfox, Joomla, Boonex, Phbb, Smf, Vbulleting etc. you don't need the next step but if you are using a Dreamweaver site or a hand-coded site it is recommended that you follow the next step.

Implementing your slant image:

Copy the following code to the place you want your image to appear.

Code: [Select]
<img class='img' src='Your Image Url Here' />
Try out this simple css effect and share your experiences and suggestions that will help us improve this code.
Wisdom pays! Be wise!

 

* Post Updates

Inside: 3P Techies Blog

* Newest Techies

Get Updates


Sign up to get latest updates delivered to your inbox. No Spam, We Promise!

Get Hosting!

a Faster web hosting service

Copyright 3rd Planet Techies. All rights Reserved.

Top || Mobile ||Advertise || Contact Us || Privacy