Question

I am trying to transform my image back to original size after user hover out of my image..Not sure what to do here..

MY css

//doesn't work
.imgDiv img{

-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);
-o-transform:scale(1, 1);
-ms-transform:scale(1, 1);
transform:scale(1, 1);

}


//enlarge the image but don't know how to shrink them back

.imgDiv:hover img{

-webkit-transform:scale(1.15, 1.15);
-moz-transform:scale(1.15, 1.15);
-o-transform:scale(1.15, 1.15);
-ms-transform:scale(1.15, 1.15);
transform:scale(1.15, 1.15);

}

html…

<div class='imgDiv'>

     <img src='a.jpg' />
     <img src='b.jpg' />
     <img src='c.jpg' />
     <img src='d.jpg' />

</div>

Thanks for the help….

Answer 1

Just remove all the transform properties from the original declaration. Since the images are, by default, scaled to 1, you don’t need to declare that. Anything that you set in an element’s :hover pseudo class is reverted to its default when the mouse is removed.

Here is an example.

Here’s the final CSS:

.imgDiv:hover img{
    -webkit-transform:scale(1.15, 1.15);
    -moz-transform:scale(1.15, 1.15);
    -o-transform:scale(1.15, 1.15);
    -ms-transform:scale(1.15, 1.15);
    transform:scale(1.15, 1.15);
}

Of course, if you were trying to apply this to each image, then you’d still remove the .imgDiv img declaration and change .imgDiv:hover img to .imgDiv img:hover.

Here is an example of that in action.