CSS Image Zoom Effect

by Salitha Chathuranga July 26, 2017 0 Comments

Have you seen zooming effect on images when browsing web pages? I think you have seen it definitely. I thought to write an article based on this technique. It can be done simply by HTML and CSS. Actually CSS is doing the main job. As you know, HTML is only used to build up the structure here also. Now we can go for the designing part.

First you need to download an image whatever you want. It is better if you can find a square shaped image to see the zoom effect well. Then HTML file ans CSS file should be created. As usual name them as  index.html and style.css. Simply start coding the html file and you have to only insert your image file. Give a class selector for this image to add a style when the css file is coded. And here you must link the css file in the head part of the html file. 

HTML file

 <!DOCTYPE html>
<html>
<head>
<title>Image Hover</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="photo">
    <img src="flower.jpg">
  </div>
</body>
</html>

CSS file

body{
  width: 400px;
  margin: 50px auto;
}
.photo{
  width: 250px;
  height: 250px;
  overflow: hidden;
  /*border-radius: 50%;*/                             
}
.photo img{
  width: 100%;
  height: 100%;
  transition: all 1s ease;
}
.photo img:hover{
  transform: scale(1.2);
}

Look at this file well..
First I have aligned the body part of the document as I want giving a width of 400 pixels. Then margin is set to center the image. These vales can be different according to your design. 

Now  it comes  to the  most important parts of the code. Call the class given for image and give a height and width accordingly. It will decide the wrapper size for this image. Next I have added a property called overflow for the class photo and set the value as hidden. By this code, the size of the image when it get zoomed, it stays within the range of the div element. When we place the mouse pointer on the image, the image is get zoomed without changing its width and height. Next you will see I have included a code in a comment as border-radius : 50%. It can be used to make the shape of the image as a circle. If you have included this,the output will be like this.
Then  I have added style to the image within the class called photo. These styles only belong to the image. Here you have to  set width and height as 100% which means the original size of the image. If this value is reduced or increased, the image will becomes large and size of the change will be changed when mouse pointer is on the image.

Now you have come to the simple animation part of the image. The line of code transition doing the job, how to animate the zooming effect. Here there are mainly 3 parameters. First it comes the name of the css property associated with transition. That is the transition effect will take place when the specifies css property starts its changing. Next parameter is time. This will specify the time that transition effect will take to complete. This allows the transition effect to changes its speed over its duration.

Finally we have come to the part where we decide to what extent the zooming should be done when someone places the cursor on the image. We use transform property to do this. Its parameter is  scale with the size of zooming. I have given it as 1.2. Whenever someone moves the cursor over the image, its size is increased 1.2 times of the original size. If you want, you can increase this value. Remember, value 1 is always giving the original size.

I think you have got an idea about CSS  zooming effect. Use this when you want to click on something in your web site. When the cursor is on it, effect will occur. It gives a new experience to the visitors of your web site.


0 Comments