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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to convert datetime to date format in JavaScript?JavaScript3 ways to pass a variable in url() function in SCSS (Sass)SCSSWordPress: How to loop through ACF group fields?WordPressControl rendering using CSS content-visibility propertyCSSGive buttons accessible namesUI/UXHow to load a module with configuration in SCSS?SCSSCommon Table Expressions (CTE) in PostgreSQLPostgresA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneousHow to show and hide an element on click in React?ReactHow to progressively load images and add a blurry placeholder?CSSHow to check if checkbox is checked or not using JavaScript?JavaScriptHow to enable and disable button using JavaScript?JavaScript