---
title: "Zoom Effect Using CSS3"
description: "Hi everyone in this article, I’m explaining about zoom effect in css3."
author: "Anonymous User"
published: 2014-12-02
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/1544/zoom-effect-using-css3
category: "css-css3"
tags: ["html5", "css"]
reading_time: 4 minutes
---
# Zoom Effect Using CSS3
Hi everyone in this article, I’m explaining about zoom effect in css3.
Description:
In this article we will discuss some examples of a zoom effect using the transform and [transition](https://answers.mindstick.com/qa/94090/a-material-is-dimensionally-stable-at-room-temperature-if-its-glass-transition-temperature-tg-is) [properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule) of CSS3. Zoom means making the [size of an element](https://www.mindstick.com/forum/158654/what-is-the-css-property-used-to-specify-the-font-size-of-an-element) larger or smaller than its current size.
There are three zoom examples as in the following:
1. Zoom using transform: scale(2); and transition: all .3s ease-out;
2. Zoom using two images. The second image will be shown on hover of just the right of the current Image without disturbing any element on the page.
3. Zoom using two images. The second image will be shown on hover at a [specified location](https://www.mindstick.com/forum/34118/extjs-failed-to-find-charts-on-the-specified-location) relative to the current position using transform: translate(0,200px); without disturbing any element on the page.
Example 1:
We are using 8 Rangoli images to show the zoom effect. First we discuss a little about the code that is [responsible](https://answers.mindstick.com/qa/94149/who-is-one-of-the-responsible-person-for-the-department-of-space-dos) for the zoom effect.
1. transition: all .3s ease-out: transition property can have the following values.\ \ transition: [transition-property] [transition-duration] [transition-timing-function]
[transition-delay];\
\
transition is triggered.\
\
1. transform: scale(2): The scale method increases or decreases the size of the element. Scale values without a unit works as a multiplier. So, scale(2) means just [double the size](https://answers.mindstick.com/qa/43150/how-did-thomas-jefferson-double-the-size-of-the-united-states) of the element. If we are providing two values(x, y) they stretch the element [horizontally and vertically](https://www.mindstick.com/forum/158678/how-can-center-align-an-element-both-horizontally-and-vertically-using-css).
## HTML Code:
```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
```
##### CSS Code:
```
```
## Output:
****
## Example 2:
We are using the same images in this example. But we are using the image twice. This example will be helpful when we want to show the image at just the right side position of the image. The points to remember are the following.
**1-position:absolute:** This is applied to the second image so that when the second image is shown in the browser as a result of a hover, it will not disturb other elements of the page.
**2-width: 0px:** To hide the second image.
**transition:** width 0.3s linear 0s: We have discussed that in Example 1.
## HTML Code:
```
```
## CSS Code:
```
```
****
**Example 3:** **\** This example is the same as Example 2. The only [difference](https://www.mindstick.com/articles/157114/good-news-or-bad-news-and-the-difference-is) is that the result image position is different. If we want to show a result image at a different postion then we use:\
\
**transform: translate(0,200px); :** translate moves the element from its [current location](https://www.mindstick.com/forum/12992/enter-the-location-in-text-box-show-address-in-map-or-point-the-current-location).
## CSS Code:
```
.rangoliPic:hover + .rangoliPicBig { width: 400px; height: 400px; transform: translate(0,200px); }
```
## Output:
****
## \
In my previous post i'll explain about Working with Web-SQL Database & HTML5\
---
Original Source: https://www.mindstick.com/articles/1544/zoom-effect-using-css3
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
