How to zoom in an image using scale3d() function in CSS ? Last Updated : 06 Apr, 2022 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how to zoom in on an image using the scale3d() function which is an inbuilt function in the transform property that has its aspects to resize the element in 3D space. It scales the element in the x, y, and z planes. Syntax: scale3d( x, y, z ) Parameters: Above function accepts three parameters which are described below. x: It positions the elements in the horizontal plane.y: It positions the elements in the vertical plane.z: It positions the elements in the z-component of the scaling vector. Approach: We will introduce an image using the img tag and set the width and height of the image using HTML. Using CSS, we will center the image using flex properties, and give a better design. Using the scale3d() function we will set the coordinates x, y, and z of the image. So that while hovering over the image scale3d() function comes into an effect and resizes the image with the given coordinate values. Example: Below is the implementation of the above approach. HTML <!DOCTYPE html> <html lang="en"> <head> <title>scale3d()in CSS</title> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <style> @import url( 'https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500&display=swap'); * { box-sizing: border-box; } #containers { display: flex; justify-content: center; align-items: center; padding-top: 90px; } div img:hover { transform: scale3d(1.1, 1.1, 1); cursor: pointer; transition: transform 1s; } img { width: 225px; height: auto; } </style> </head> <body> <section id="img-container"> <div id="containers"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220328131201/download3.png" width="225" height="225" alt="logo"> </div> </section> </body> </html> Output: Comment More infoAdvertise with us Next Article How to zoom in an image using scale3d() function in CSS ? U user_ax8z Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects 2 min read How to Zoom an Image on Scroll using JavaScript? Zoom in and out of images is a common feature in web development. One way to achieve this effect is by using JavaScript to zoom in and out of an image when the user scrolls. In this article, we will go through the steps needed to create a zoomable image using JavaScript.Step 1: HTML Markup: The firs 3 min read How to create an Image Overlay Zoom Effect on hover using CSS ? Image Overlay Zoom Effect on hover can be done by using CSS. This effect is used in web design for user attention to images by highlighting the content or text, and to improve the overall look of a website by adding dynamic visual effects. We have given a Zoom effect to the text and image when the u 2 min read How to Flip an Image on hover using CSS? Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect.Appr 2 min read How to use Flex to Shrink an Image in CSS ? Shrinking an image in CSS means reducing its size to fit within a container. Using Flexbox, you can apply the flex-shrink property to control how much an image shrinks relative to other elements in a flex container, ensuring responsive resizing when space is limited.Syntaxflex-wrap: wrapNote: wrap i 1 min read Like