Search code examples
positioninghtml

image position within span

I have a div container broken into quadrants. Each quadrant has an image the size of the container, but cropped to that quadrant. On mouseover I want to make the quadrant expand to fit the container. My challenge is positioning the images with in the DIV. The top left image is fine, all the other images align to the top left of the span they are in and I need all of the images to align themselves at the top left. See this fiddle it may will make more sense looking at it.

Basically all the images should have the same position, stacked exactly on top of each other with only one quadrant exposed based on the z-index and which span they are in. jquery will reveal the full image on mouseover.

Just in case you didn't see the fiddle here:

    <!DOCTYPE html>
    <html>
    <head>

      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
  #containter {background: black; height:500; width:800px; padding:0px; overflow: hidden;}
  #top-left {position: absolute; top:0px; left: 0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 1; }
  #top-right {position: absolute; top:0px; left:400px; height: 250px; width:400px; overflow:hidden;z-index: 2;}
  #bottom-left {position: absolute; top:250px; left:0px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 3; }
  #bottom-right {position: absolute; top:250px; left: 400px; height:250px; width:400px; padding:0px; overflow: hidden; z-index: 4; }
</style>
    </head>
    <body>

    <div id="box">
        <span id="top-left">
            <image src="http://2.bp.blogspot.com/_Otv4_7K3yfk/TTxZykkA4cI/AAAAAAAAAcM/bQFOHrc5fyQ/s1600/Wallpapers_Nature+%25288%2529.jpg">
        </span>
        <span id="top-right">
            <image  src="http://www.adywallpapers.com/nature/260_nature_wallpapers.jpg">
       </span>
       <span id="bottom-right">
                    <image src="http://www.adywallpapers.com/nature/101_nature_wallpapers.jpg">
        </span>
        <span id="bottom-left">
                    <image src="http://www.adywallpapers.com/nature/192_nature_wallpapers.jpg">
        </span>     
    </div>

    <script>
      $("#top-left").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
        });
      $("#top-left").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );
            $( this ).css("z-index", "1");
        });
      $("#bottom-left").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
        });
      $("#bottom-left").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );        
            $( this ).css("z-index", "3");
      });

    $("#top-right").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
        });
    $("#top-right").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );
            $( this ).css("z-index", "2");        
       });
    $("#bottom-right").mouseover(function() {
            $( this ).css( "width","+=400");
            $( this ).css( "height","+=250" );
            $( this ).css("z-index", "100");
       });
    $("#bottom-right").mouseout(function() {
            $( this ).css( "width","-=400");
            $( this ).css( "height","-=250" );    
            $( this ).css("z-index", "4");        
    });
    </script>

    </body>
    </html>

Thanks

Solution

  • Figured it out. click here to see the fiddle Now to animate or fade the transition.