articles

Home / DeveloperSection / Articles / Zoom Effect Using CSS3

Zoom Effect Using CSS3

Anonymous User5647 02-Dec-2014

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 properties of CSS3. Zoom means making the 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 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 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];

    1. transition-property: It can have all (the initial value) or none, or a comma-separated list of properties.

    2. transition-duration: It can have values in seconds and milliseconds. It determines how much time will take to complete the transition.

    3. transition-timing-function: This property is used to specify how the pace (speed) of the transition changes over its duration. It can have a predefined set of values:

            => linear will maintain the same speed throughout the transition. 
            => ease-in will start the animation slowly and finish at full speed. 
            => ease-out will start the animation at full speed, then finish slowly. 
            => ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly. 
            =>ease is like ease-in-out, except it starts slightly faster than it ends.

    4. transition-delay: It is responsible for a delay of time from when the

      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 of the element. If we are providing two values(x, y) they stretch the element horizontally and vertically.

HTML Code:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
 
<!DOCTYPEhtml>
 
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
</head>
<body>
    <formid="form1"runat="server">
        <div>
            <imgclass="rangoliPic"src="Images/1.jpg"/>
            <imgclass="rangoliPic"src="Images/2.jpg"/>
            <imgclass="rangoliPic"src="Images/3.jpg"/>
            <imgclass="rangoliPic"src="Images/4.jpg"/>
            <imgclass="rangoliPic"src="Images/5.jpg"/>
            <imgclass="rangoliPic"src="Images/6.jpg"/>
            <imgclass="rangoliPic"src="Images/7.jpg"/>
            <imgclass="rangoliPic"src="Images/8.jpg"/>
        </div>
    </form>
</body>
</html>
CSS Code:
<styletype="text/css">
 
        .rangoliPic {
            width: 200px;
            height: 200px;
            -webkit-transition: all.3sease-out;
            -moz-transition: all.3sease-out;
            -o-transition: all.3sease-out;
            transition: all.3sease-out;
        }
 
            .rangoliPic:hover {
                -moz-transform: scale(2);
                -webkit-transform: scale(2);
                -o-transform: scale(2);
                -ms-transform: scale(2);
                transform: scale(2);
            }
    </style>

Output:

 Zoom Effect Using CSS3

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:

<div>
            <imgclass="rangoliPic"src="Images/1.jpg"/>           
            <imgclass="rangoliPicBig"src="Images/1.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/2.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/2.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/3.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/3.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/4.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/4.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/5.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/5.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/6.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/6.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/7.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/7.jpg"/> 
 
            <imgclass="rangoliPic"src="Images/8.jpg"/> 
            <imgclass="rangoliPicBig"src="Images/8.jpg"/> 
        </div>

 

CSS Code:

<styletype="text/css">
 
        .rangoliPic {
            width: 200px;
            height: 200px;
        }
 
        .rangoliPicBig {
            position: absolute;
            width: 0px;
            transition: width0.3slinear0s;
            z-index: 10;
        }
 
        .rangoliPic:hover+.rangoliPicBig {
            width: 400px;
            height: 400px;
        }
    </style>

 

Zoom Effect Using CSS3

 

Example 3:
This example is the same as Example 2. The only difference 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.

CSS Code:

.rangoliPic:hover+.rangoliPicBig {
            width: 400px;
            height: 400px;
            transform: translate(0,200px);
        }
 

Output:

Zoom Effect Using CSS3


In my previous post i'll explain about Working with Web-SQL Database & HTML5


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By