MyBB Community Forums

Full Version: animated image hover effect (CSS3 transform)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
CSS3 brings a whole lot of featured that keeps you from using js for all purposes. One of the purpose is animation/transform

If you are a google-images user, you must have seen that the images in the search result slightly enlarge when we hover over them. Do you want to achieve the same effect? keep reading

Let's start.

1. define a new class for your image..say "pixelmonkey"
NOTE: if you want to apply this effect on ALL the images, you can simple use
img {thecodehere}
(we'll discuss the code too)

2. now we need to edit the css file
type some new things ->
.pixelmonkey {
/*for smooth animation*/
transition:all 0.4.s; /* tweak that to your heart */
-webkit-transition:all 0.4.s; /*chrome and Safari*/ 
-o-transition:all 0.4.s; /*Opera*/
-moz-transition:all 0.4.s; /*mozilla firefox*/
-ms-transition:all 0.4.s;  /* IE9 */
}

^the above code defines the styling for our image in normal state.

Now we will code the animation for hovered state
two effects we are gonna use.
scale : this zooms in/out the images
rotate : rotates the image

here's the hovered state css for you
.pixelmonkey:hover {
-webkit-transform: rotate(3deg) scale(1.1);
transform: rotate(3deg) scale(1.1);
-o-transform: rotate(3deg) scale(1.1);
-moz-transform: rotate(3deg) scale(1.1);
-ms-transform: rotate(3deg) scale(1.1);
}

FINAL CODE :
<style>
.pixelmonkey {
/*for smooth animation*/
transition:all 0.4.s; /* tweak that to your heart */
-webkit-transition:all 0.4.s; /*chrome and Safari*/ 
-o-transition:all 0.4.s; /*Opera*/
-moz-transition:all 0.4.s; /*mozilla firefox*/
-ms-transition:all 0.4.s;  /* IE9 */
}
.pixelmonkey:hover {
-webkit-transform: rotate(3deg) scale(1.1);
transform: rotate(3deg) scale(1.1);
-o-transform: rotate(3deg) scale(1.1);
-moz-transform: rotate(3deg) scale(1.1);
-ms-transform: rotate(3deg) scale(1.1);
}
</style>

<img src="path" class="pixelmonkey" />

That's all. it should work...let me know if you have anymore questions.