Image Scaling on Mouseover Event in Windows Store App

Introduction

Today we will create a Metro Style App using JavaScript. We will create an image gallery and scale the images in a Mouseover event using a jQuery library. So first of all we will added a jQuery library to our project and using it to create a link in our HTML page.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.

Open Visual Studio 2012
File -> New -> Project
Choose Template -> JavaScript -> Metro Style Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following is the contents of the project:

JavaScript Code
Style Sheet Code

Code :

$(document).ready(function () {

var cont_left = $("#container").position().left;

$("a img").hover(function () {

// hover in

$(this).parent().parent().css("z-index", 1);

$(this).animate({

height: "550",

width: "550",

left: "-=100",

top: "-=100"

}, "fast");

}, function () {

// hover out

$(this).parent().parent().css("z-index", 0);

$(this).animate({

height: "150",

width: "150",

left: "+=100",

top: "+=100"

}, "fast");

});

$(".img").each(function (index) {

var left = (index * 160) + cont_left;

$(this).css("left", left + "px");

});

</script>

Code:

#container {

text-align: center;

position: absolute;

left: 260px;

margin-top: 150px;

width: 790px;

}

.img {

position: fixed;

z-index: 0;

}

.end {

margin-right: 0;

}

.clear {

clear: both;

}

.img a img {

position: relative;

border: 0 solid #fff;

}

</style>

Step 4 : The complete code of this application is written below. It contains the code of HTML file code and JavaScript file code.

Code:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function () {

var cont_left = $("#container").position().left;

$("a img").hover(function () {

// hover in

$(this).parent().parent().css("z-index", 1);

$(this).animate({

height: "550",

width: "550",

left: "-=100",

top: "-=100"

}, "fast");

}, function () {

// hover out

$(this).parent().parent().css("z-index", 0);

$(this).animate({

height: "150",

width: "150",

left: "+=100",

top: "+=100"

}, "fast");

});

$(".img").each(function (index) {

var left = (index * 160) + cont_left;

$(this).css("left", left + "px");

});

</script>

#container {

text-align: center;

position: absolute;

left: 260px;

margin-top: 150px;

width: 790px;

}

.img {

position: fixed;

z-index: 0;

}

.end {

margin-right: 0;

}

.clear {

clear: both;

}

.img a img {

position: relative;

border: 0 solid #fff;

}

</style>

</head>

<body>

<div style="margin-top:50px;margin-left:100px"><h1 style="font-weight:bold">Image Scaling in Metro Apps on Mouseover Event</h1></div>

</div>

</body>

</html>

Step 5 : After running this code the output looks like this:

In the Mouse over event the first image will be scaled in size:

On Mouse over of the third image: