I am using the following code to zoom into an 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>
Currently this code works except for in will only zoom to the center of the image. My question is: How can I zoom into a pre-determined location (could be as simple as just left or right as opposed to the center that it currently is.) I would like to achieve the outcome using CSS if possible.
Use the Transform Origin property and you can set the origin point. This will allow you to control where the zoom occurs from/to.
transform-origin: top right;
etc.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With