A Mouseover Zoom Effect Using jQuery and CSS

Sapna
May 15, 2012

25.4k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

This article will show you how to create a MouseHover Zoom effect using jQuery and CSS step by step. Image Hover effects can make your website look dynamic and feel more alive. Not only can it style your images nicely, but also helps you to better allocate your image captions. In this article, I have a nice looking effect that I'm calling "MouseHover zoom" because it's pretty self-explanatory. I've seen similar effects as this one in a few sites here and there, and they were always built in Flash. I wanted a CSS and Javascript (jQuery) solution so I whipped up this Hover Zoom effect.

Step 1: First we have to create a Web Application.

Go to Visual Studio 2010.
New--> And select the Web Application.
Give whatever name you want to.
Click OK.

Step 2: Secondly you have to add a new page to the website.

Go to the Solution Explorer.
Right-click on the project name.
Select add new item.
Add new web page and give it a name.
Click OK.

Step 3 : In this step we are adding an image in the "Images" folder of the project.

Step 4 : In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.

Step 5: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code:

Right-click on selected file -> copy and paste it inside <Head> section of your page; see step 6.

Step 6: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in <head> section or the <body> section as you prefer.

Step 7: In this step we have to write the jQuery code which is given below.

Step 8: In this step you will see the body code of the Default2.aspx page which is given below.

Body Code:

<body>
    <div class="viewport">
        <a href="Images/lotus%20temple.jpg">
            <span class="dark-background">Lotus Temple <em>Photo by Akshay Teotia</em></span>
          <img src="Images/lotus%20temple.jpg"   alt="Temple" />
        </a>
   </div>
    <div class="viewport no-margin">
        <a href="Images/Ball.JPG">
            <span class="dark-background">ball <em>Photo by Akshay Teotia</em></span>
            <img src="Images/Ball.JPG" alt="ball" />
        </a>
    </div>
    <div class="viewport">
        <a href="Images/Sachin%20Tendulkar.jpg" >
            <span class="light-background">Sachin Tendulkar <em>Photo by Akshay Teotia</em></span>
            <img src="Images/Sachin%20Tendulkar.jpg" alt="Sachin" />
        </a>
    </div>
    <div class="viewport no-margin">
        <a href="Images/taj-mahal.jpg">
            <span class="dark-background">Taj Mahal<em>Photo by Akshay Teotia</em></span>
            <img src="Images/taj-mahal.jpg" alt="Tajmahal" />
        </a>
    </div>
</body>

Step 9: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A simple MouseHover Tour Using jQuery</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('.viewport').mouseenter(function (e) {
                $(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450' }, 100);
                $(this).children('a').children('span').fadeIn(200);
            }).mouseleave(function (e) {
                $(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500' }, 100);
                $(this).children('a').children('span').fadeOut(200);
            });
        });
</script>
<style type="text/css">
        .viewport {
            border: 3px solid #eee;
            float: left;
            height: 299px;
            margin: 0 9px 9px 0;
            overflow: hidden;
            position: relative;
            width: 450px;
        }
        .no-margin {
            margin-right: 0;
        }
        .viewport a {
            display: block;
            position: relative;
        }
        .viewport a img {
            height: 332px;
            left: -20px;
            position: relative;
            top: -20px;
            width: 500px;
        }
        .viewport a span {
            display: none;
            font-size: 3.0em;
            font-weight: bold;
            height: 100%;
            padding-top: 120px;
            position: absolute;
            text-align: center;
            text-decoration: none;
            width: 100%;
            z-index: 100;
        }
            .viewport a span em {
                display: block;
                font-size: 0.45em;
                font-weight: normal;
            }
        .dark-background {
            background-color: rgba(15, 15, 15, 0.6);
            color: #fff;
            text-shadow: #000 0px 0px 20px;
        }
            .dark-background em {
                color: #ccc;
            }
        .light-background {
            background-color: rgba(255, 255, 255, 0.6);
            color: #333;
            text-shadow: #fff 0px 0px 20px;
        }
            .light-background em {
                color: #707070;
            }
</style>
</head>
<body>
    <div class="viewport">
        <a href="Images/lotus%20temple.jpg">
            <span class="dark-background">Lotus Temple <em>Photo by Akshay Teotia</em></span>
          <img src="Images/lotus%20temple.jpg"   alt="Temple" />
        </a>
   </div>
    <div class="viewport no-margin">
        <a href="Images/Ball.JPG">
            <span class="dark-background">ball <em>Photo by Akshay Teotia</em></span>
            <img src="Images/Ball.JPG" alt="ball" />
        </a>
    </div>
    <div class="viewport">
        <a href="Images/Sachin%20Tendulkar.jpg" >
            <span class="light-background">Sachin Tendulkar <em>Photo by Akshay Teotia</em></span>
            <img src="Images/Sachin%20Tendulkar.jpg" alt="Sachin" />
        </a>
    </div>
    <div class="viewport no-margin">
        <a href="Images/taj-mahal.jpg">
            <span class="dark-background">Taj Mahal<em>Photo by Akshay Teotia</em></span>
            <img src="Images/taj-mahal.jpg" alt="Tajmahal" />
        </a>
    </div>
</body>
</html>