Question

I am working on a page which comprises of the divs floated on same direction with each having specified width so as to create a grid. I was trying the -webkit scale effect in order to have a zooming effect on the any hovered div along with other divs having their opacity reduced.

The problem arises when among the divs stacked together, when the div that comes first in order is hovered, it is partially overlapped the its successor div(having reduced opacity) due to zooming

here’s an example code
html

<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;

     }

and jquery

    function tile_mouseover()
    {
    $(this).siblings('.tile').stop(true,true).animate({'opacity':'0.5'},300);
    $(this).stop(true,true).animate({opacity:1},200)
    }

On implementing the above the code,
when div1 is hovered, its scaled, and is overlapped by div2.

Any possible solutions?

Answer 1

I think this should work.

.tile {
  position: relative;
}
.tile:hover{
  z-index:2;
}