I'm currently working on a web page where I have multiple divs floated in the same direction, each with a specified width to create a grid layout. I'm attempting to use the -webkit scale effect to zoom in on a hovered div while reducing the opacity of the other divs.
The issue arises when the first div in the stack is hovered over and scaled, causing it to overlap partially with the next div with reduced opacity.
Here's an example of the code:
<div id="div1" class="tile">Content 1</div>
<div id="div2" class="tile">Content 2</div>
<div id="div3" class="tile">Content 3</div>
CSS:
.tile{
width:100px;
margin:6px;
float:left;
height:100px;
margin-right:0px;
margin-bottom:0px;
-webkit-transition: all .1s ease-in-out .1s;
-moz-transition: all .1s ease-in-out .1s;
}
.tile:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-moz-box-shadow: 0 0 3px 1px #fff;
-webkit-box-shadow: 0 0 3px 1px #fff;
box-shadow: 0 0 3px 1px #333;
}
JQuery:
function tile_mouseover()
{
$(this).siblings('.tile').stop(true,true).animate({'opacity':'0.5'},300);
$(this).stop(true,true).animate({opacity:1},200)
}
When implementing this code, the scaling of div1 causes overlapping with div2. Any suggestions for a solution?