Telegram Group Join Now
How to make your content get zoomed on hovering over the content? Image Zoom On Hover
You need basic knowledge of CSS for this project. This tutorial is well suited for CSS Beginners. Let us get started with the project.
Hello learners you have seen on many websites that when you over on any particular card any particular shape or size or any object on the website then it will be zoomed. So today we are going to create such a type of zoom-in effect in this project.
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
So firstly we will start with the basic layout of our web page, which is drawn easily by using of HTML( Hypertext Markup language).
HTML is the basic layout of the website. We have inserted are div tag inside the body tag of the HTML and inside the div tag we have also inserted the img tag in which we have given a URL of an image in its SRC attribute.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<img src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGhvdG98ZW58MHx8MHx8&w=1000&q=80" alt="">
transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Here we are using the transform property which is basically used to Used to transform any elements. Properties like scaling, moving, rotating it,translating.
As we wanted to change the style of our picture when we over on the picture then we are using the pseudo class over which is active when we move the cursor of our mouse over the content.
Scale is a property used when we want to change the size of any content like any card or image, we use it. If we want to increase the size by 1.5 times of our image then we will use scale(1.5) here we are using 1.2 times the image so we are using scale (1.2). If you want to decrease the size of the image in multiple then we can use. Let’s assume if you want to decrease the size of the image by half then we will use scale(0.5).
background: rgb(255, 253, 253);
border:5px solid rgb(3, 159, 249);
Similarly, you can apply the zoom effect on any card let’s assume you want to build an ecommerce website then you use this zoom effect on the cards of different items. Then you can use the zoom effect on hovering.
I hope you have loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.