How to zoom in on a certain place of the image using CSS

Question

I use the following code to enlarge the image:

<style type="text/css"> .thumbnail { width: 100%; height: 450px; overflow:hidden; } .image { width: 100%; height: 100%; } .image img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; } .image:hover img { -webkit-transform:scale(3); /* Safari and Chrome */ -moz-transform:scale(3); /* Firefox */ -ms-transform:scale(3); /* IE 9 */ -o-transform:scale(3); /* Opera */ transform:scale(3); } </style> <div class="thumbnail"> <div class="image"> <img src="example.jpg" alt="Image zoom"> </div> </div> 

This code currently works, except that it will only approach the center of the image. My question is: how can I increase a predefined location (it can be as simple as left or right, as opposed to the center where it is currently located.) I would like to achieve the result using CSS, if possible.

Answer 1

Use the Transform Origin property, and you can set the starting point. This will allow you to control where the increase from / to.

transform-origin: top right; etc.