Yogesh Chauhan's Blog

How to zoom an image inside a box on hover?

in CSS on July 31, 2021

Similar Post:

How to zoom an element on hover using CSS?

Implementing a zoom on image or other elements is easy, with just one single line. You use transform and scale the image.

But scaling the image inside a container requires a few more lines.

There are a few ways we can do this. I will demonstrate a couple of ways.

Adding overflow: hidden is MUST in both of these approaches. It will prevent the image from going outside of its container when it scales.

Using a fixed height and width

You can set a fixed height and width for a container and then adjust the image inside.

Additionally, you can have CSS properties like box-sizing

Using inline-block

First thing you need to do is to set the display property of the container to inline-block. You can have it set as inline-grid, inline-flex too if you’d like. Also, set the image to block or flex.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to check if checkbox is checked or not using JavaScript?JavaScriptColleague UI Basics: The Search AreaColleagueHow to detect if browser supports WebP format on server side PHP script?PHPHow to insert Bootstrap 4 in Angular 9 app?AngularWhat’s a page re-rendering in React?React10 Usability Blunders to AvoidUI/UXHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQLKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousThe Difference Between Arrays and Objects in JavaScriptJavaScriptWordPress: How to loop through ACF group fields?WordPressHow to hide and show menu on scroll using JavaScript and CSS?CSSHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHP