Home/ Questions/Q 7676277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T17:09:50+00:00

I attempting to create an 800×500 div with four overlapping divs inside the container

  • 0

I attempting to create an 800×500 div with four overlapping divs inside the container that are 800×500. 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 400×250 to 800×500 and adjust the z index accordingly so the expanded div is on top. I’m stumped at the beginning though. I set up an 800×500 container div. Inside that container I placed 4 400×250 divs. I was expecting that placing an 800×500 image in a 400×250 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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0