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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
Introduction to components and templates Part 3: Data bindingAngularCan Firewall and IDPS Stop DDoS Attack?MiscellaneousQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLHow to create Glowing Texts using CSS?CSSJavaScript Data Types and Data Structures Things to RememberJavaScriptIs there a difference between SCSS and Sass?SCSSSpecificity of attribute selectorsCSSWhat’s a Log File and What are Log File Monitors?MiscellaneousSolution for “Yarn build: Failed because of a stylelint error”WordPressLearn to Make a Simple Contact Us Form using PHP and PDO-MySQLPHPSelect statement in Postgres with examplesPostgresHow to create an empty array in Swift?Swift