How can I zoom this gallery without moving the other pictures?
On hover, I want to zoom the zoomed .itemWrapper .However, the zooming effect is moving the other images from its place. How can I fix this that is when I hover, the div is zoomed without moving the other images?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="salehover.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".itemWrapper").css({"border":"1px red solid"});
$(".itemWrapper").hover(function()
{ var Salon_Text = $(this).find(".icon_salon").children("span");
var ind = ($(".itemWrapper")).index($(this));
$(this).css({"z-index":"10"});
$(this).next("..itemWrapper").css({"margin-left":"14px"});
$(this).stop().animate({"width":"228px","height":"222px"});
$(this).css({"top":"-14px","left":"-14px"});console.log($(".itemWrapper:nth-child("+(ind+2)+")").attr("class"));
},
function()
{
$(".itemImage img",$(this)).stop().animate({"width":"196px","height":"180px"});
$(this).stop().animate({"width":"218px","height":"200px"});
$('.icon_salon',$(this)).children('img').toggle();
$(this).css({"top":"14px","left":"14px"});
});
});
</script>
</head>
<body>
<div class="selectionBoxes">
<div class="itemWrapper 1">
<div class="item">
<div class="hovering">
<div class="shadow">
<div class="itemImage">
<img src="../../images/box-salon.png" width="196" height="178" alt="Salon"/>
</div>
</div>
<div class="icon_salon"> <img src="../../images/icon-salon.png" width="52"/> <img src="../../images/icon-salon_on1.png" style="display:none;" width开发者_开发知识库="54" height="40"/>
<span>SALON</span>
</div>
</div>
</div>
</div>
<div class="itemWrapper 2">
<div class="item">
<div class="hovering">
<div class="shadow">
<div class="itemImage"><img src="../../images/box-chambre.png" width="196" height="178" alt="Salon"/></div></div>
<div class="icon_salon"><img src="../../images/icon-chambre.png" width="54" height="40" /><img src="../../images/icon-chambre_on1.png" style="display:none;" width="54" height="40"/>
<span>CHAMBRE</span>
</div>
</div>
</div>
</div>
<div class="itemWrapper 3">
<div class="item">
<div class="hovering">
<div class="shadow">
<div class="itemImage"><img src="../../images/box-bureau.png" width="196" height="178" alt="Salon"/></div>
</div>
<div class="icon_salon"><img src="../../images/icon-bureau.png" width="54" height="40" /><img src="../../images/icon-bureau_on.png" style="display:none;" width="54" height="40" />
<span>BUREAU</span>
</div>
</div>
</div>
</div>
<div class="itemWrapper 4">
<div class="item">
<div class="hovering">
<div class="shadow">
<div class="itemImage"><img src="../../images/box-cuisine.png" width="196" height="178" alt="Salon"/></div></div>
<div class="icon_salon"><img src="../../images/icon-cuisine.png" width="54" height="40" /><img src="../../images/icon-cuisine_on.png" style="display:none;" width="54" height="40" />
<span>CUISINE</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*Css */
.icon_salon{
width: 110px;
height: 110px;
}
/*Added*/
.selectionBoxes {
height:200px;
padding-top:30px;
}
.selectionBoxes .itemWrapper{
position:relative;
float:left;
margin-left:20px;
cursor:pointer;
}
.item span{
color:#5d5c5c;
display:block;
padding-left:65px;
margin-top:-20px;
}
.shadow {
background:url(../../images/images/shadowbitu.png) no-repeat right bottom;
width:218px;
height:200px;
}
Are trying to do this:
See the Demo: http://jsfiddle.net/rathoreahsan/jKTVn/5/
加载中,请稍侯......
精彩评论