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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
CROSS JOIN in PostgresPostgresSelf-Driving and Intelligent NetworksMiscellaneousWhat is a “promise” in JavaScript?JavaScriptWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQueryHow to create a sticky menu pin using CSS?CSSHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLHow to show widgets on the Appearance tab in WordPress?WordPressCheck If a String Contains a Specific Word in PHPPHPHow to Find the Highest (or Lowest) Number in an Array in JavaScript?JavaScriptAdvanced nesting in Sass (SCSS) using at-rootSCSSWhat is HTMLUnknownElement?HTMLEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgres