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 Access a Global Variable From Inside a Function in PHP?PHPFor Each Loop in Swift for BeginnersSwiftIs Software Really Eating The World? I don’t think soMiscellaneousJavaScript Input Validation Theme Park Example using throw StatementJavaScriptHow to float an image around texts?CSSHow to add a ribbon inside a container using CSS?CSSLEFT JOIN in PostgresPostgresHow to read Standard Input in Swift?SwiftHow to remove the Gutenberg Block Library CSS from WordPress?WordPressLIMIT and OFFSET in PostgresPostgresHow to position an image on top of another image using CSS?CSSHow to create an empty array in Swift?Swift