CSS overlapping divs revealed with jquery

StackOverflow https://stackoverflow.com//questions/9720776

  •  16-12-2019
  •  | 
  •  

Question

I attempting to create an 800x500 div with four overlapping divs inside the container that are 800x500. On the initial load I'm trying to have 1/4 of each overlapping div display and eventually when you click or maybe mouse over one of the quadrants jquery will expand that quadrant from 400x250 to 800x500 and adjust the z index accordingly so the expanded div is on top. I'm stumped at the beginning though. I set up an 800x500 container div. Inside that container I placed 4 400x250 divs. I was expecting that placing an 800x500 image in a 400x250 container would crop the image and I would see all four at the get go and then I was going to work on the transform.

Any help would be great. Here is the fiddle I've been playing with.

Or you can look at the code here for all you mental compilers.

<html>
<head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){    

    $("div").click(function () {
        $(this).effect("scale", { percent: 300, direction: 'both' }, 1000);
  });

    });
    </script>    
</head>
<body>
<div class="container">

        <div class="top-left">
                <image src="http://kpbs.media.clients.ellingtoncms.com/img/photos/2010/11/12/nature-wolverines-snow_tx700.jpg?8e0a8887e886a6ff6e13ee030987b3616fc57cd3">
        </div>    
        <div class="top-right">
                <image src="http://www.adywallpapers.com/nature/260_nature_wallpapers.jpg">
        </div>
        <div class="bottom-right">
                <image src="images/http://www.adywallpapers.com/nature/101_nature_wallpapers.jpg">
        </div>
        <div class="bottom-left">
                <image src="http://www.adywallpapers.com/nature/192_nature_wallpapers.jpg">
        </div>         

</div>

</body>
</html>

CSS

body {
    background-color:#000;
    }

#container {
    position: absolute;
    width: 800px;
    height: 500px;            
}

.bottom-right {
    position:absolute;
    top:0px;
    left: 0px;
    background-color:yellow;
    z-index:-1;
    width: 400px;
    height:  250px;
}


.top-right{
    top:0px;
    left: 0px;
    background-color:white;
    z-index:-2;
    width: 400px;
    height:  250px;
}

.bottom-left {
    position:absolute;  
    top:0px;
    left: 0px;
    background-color:blue;
    z-index:-3;
    width: 400px;
    height:  250px;
}

.top-left{
    position:absolute;
    top:0px;
    left:0px;
    background-color:black;
    z-index:-4;
    width: 400px;
    height:  250px;
}
Was it helpful?

Solution

I updated your fiddle: http://jsfiddle.net/qz8rK/2/

I changed your css like this:

body {
background-color:#000;
}

.container {
position: absolute;
width: 800px;
height: 600px;            
}

.container div {
width: 400px;
height: 250px;
overflow: hidden;
}

.bottom-right {
position:absolute;
top:250px;
left: 400px;
background-color:yellow;
z-index:-1;
}


.top-right{
top:0px;
left: 400px;
background-color:white;
z-index:-2;
}

.bottom-left {
position:absolute;  
top:250px;
left: 0px;
background-color:blue;
z-index:-3;
}

.top-left{
position:absolute;
top:0px;
left:0px;
background-color:black;
z-index:-4;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top