Skip to main content

Image Zoom On Hover | Rustcode

by Rustcode
image-zoom-on-hover-effectpure-css-rustcode

"Image zoom on hover" is a general animation on an image that is used in almost every website because this effect looks attractive and smooth. 

In this effect, when we hover over the image, the image size will increase and become larger. Here we are using html and css. The CSS property "transform" is being used to create this effect.

If you want to learn more about the "various effects on image" read our articles.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Image Zoom On Hover | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

	main content.

</body>
</html>


02. HTML

We are also including an image in the blog card design. You can download that image from here. 

<body>   
  <div class="container">
    <img src="image.jpg" alt="image">
  </div>
</body>



3. CSS

body{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background: crimson;
}
.container{
  width: 300px;
  height: 450px;
  border-radius: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  box-shadow: 2px 2px 24px #000;
}
.container img{
  width: 300px;
  height: 450px;
  border-radius: 6px;
  transition: all .4s ease-in-out;
}
.container:hover img{
  transform: rotate(5deg) scale(1.8);
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.



05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download from here and change this according to your need.




RELATED POST:

Comments

Post a Comment