How to uncover an image with css and jQuery


Tags: jquery,css

Problem :

I want to initially cover up an image with a white background div overtop the image. After the user clicks on a button, a part of the overlaying div will be removed to show part of the image underneath.

So if the image was divided into four, when one of the buttons was clicked, it would remove the z-index for a specific set of coordinates pertaining to that id in the jQuery. I just don't know how to do that using a css style.

Here is the basic outline:

<div id="buttons">
   <ul>
       <li id="0">button0</li>
       <li id="1">button1</li>
       <li id="2">button2</li>
       <li id="3">button3</li>
   </ul>
</div>
<div id="image">
    <div id="overlay"></div>
    <div id="reveal">
        <img src="http://science.nasa.gov/media/medialibrary/2010/03/31/sn_remnant_n63a.jpg/image_thumb" height="128" width="128"/>
    </div>
</div>
<style>
    #image{
        width: 128px;
        height: 128px;
        position: relative;
    }
    #overlay{    
        width:128px;
        height:128px;
        background-color:white;
        z-index: 10;
        position: absolute;
    }
</style>


Solution :

http://jsfiddle.net/NdD8E/

see the jsfiddle for the answer.

jQuery(function(){   
    jQuery('#0').click(function(){
        jQuery('#overlay1').toggle();
    });
    jQuery('#1').click(function(){
        jQuery('#overlay2').toggle();
    });
    jQuery('#2').click(function(){
        jQuery('#overlay3').toggle();
    });
    jQuery('#3').click(function(){
        jQuery('#overlay4').toggle();
    });
});

    CSS Howto..

    How can align css colums vertcally to the bottom?

    How to scroll an html element both horizontally and vertically with top and side labels scrolling correctly

    CSS table: How to position action buttons left to each row

    Have there been measurements on how much faster CSS is than Javascript for coding an effect? [closed]

    CSS Media Queries: How to make the right column display above the left on small screens?

    How to align 3 child div in a parent div

    How to align an element when it locates below some float elements?

    How to configure CSS with Spring MVC and Tiles

    How to create a sphere in css?

    I created a jQuery slideshow but it keeps repeating the same image

    How to work with Action Link when using CSS

    How to fit HTML table row to its content

    How to php echo content into
    classes dynamicaly [closed]

    How to use Vendor Properties in Multiple Backgrounds?

    How can I display a list in an x by y fashion?

    How to separate css style from common to different statement

    How do I link an external css to overwrite bootstrap css for centering elements?

    How can I create a drop down menu with JQuery

    how to set menu to activate always hover effect on [closed]

    CSS: How to move contents of one div into another one

    How can I align a logo AND a heading to the centre of a page?

    How to check if element contains specific class attribute

    How to set a background-color to element which has the same id with anchor of url?

    How to change CSS Class of an image in ListView depending on content in ASP.NET // C#

    How to style parent li elements of headers using CSS?

    How can I make a DIV element Fixed but non-Scaleable?

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    How to make button look like a link?

    How to create vertical ruler in CSS/html?

    how to make nested flexboxes work