How to make your content get zoomed on hovering over the content? Image Zoom On Hover

How to make your content get zoomed on hovering over the content? Image Zoom On Hover

How to make your content get zoomed on hovering over the content? Image Zoom On Hover

Welcome to today’s tutorial. Today we are going to create a zoom effect by hovering the content using HTML and CSS. For this, we are going to use HTML, CSS.

 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.

LIVE SERVER:- 

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:-

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.

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGhvdG98ZW58MHx8MHx8&w=1000&q=80" alt="">
</div>
</body>
</html>

As our basic layout of our website is done. So we are going to style the website to look more, prettier.

CSS:-

CSS stands for cascading Style sheet. It is used for styling the basic layout / HTML file of any web page. Here in this project we are using some basic CSS properties. First you should try to learn it. Then you can apply it easily with the help of this blog.


The 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).

 *{  
padding: 0;
margin: 0;
}
div{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgb(255, 253, 253);
}
img{
height: 50vh;
margin: 20px;
border:5px solid rgb(3, 159, 249);
border-radius: 15px;
transition-duration:0.7s;
}
img:hover{
transform: scale(1.2);
transition-duration:0.7s;
}

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.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.


Leave a Reply