What's new

How to Add Slanting Css Hover Effect on a Website Image


Active Techie
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.

.img: hover{
-moz-transform:rotate(22.5deg) scale(1.20);
-webkit-transform:rotate(22.5deg) scale(1.20);


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.

<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.


  • image3.jpg
    12.2 KB · Views: 104