Question

I want an image, that when pressed, shows another image apear from the left of the screen to a point in the background image. I then want to zoom in on that image and make a modal box apear. How can I do this?

The point in the background need to stay the same. When I resize the browser it needs to appear at the same point.

Answer 1

See a working demo of the following code here.

The first part of your problem can be solved using position:absolute within a position:relative container that holds your background image.

#wrapper {
    overflow-x:hidden;
    width:100%;
    position:relative;
}
#absSlide {
    width:100px;
    position:absolute; top:200px; right:-100px;
}

Make sure the wrapper is as wide as the window and that the overflow-x:hidden so that the slide in div isn’t visible before the click. The slide in will be positioned just off stage to the right and top:XXXpx where XXX is the distance from the top of the page where your background element is. Your jQuery would look something like this to animate in the hidden div on click:

$('#showSlide').click(function(e){
    e.preventDefault();
    $('#absSlide').animate({'right':0},450);
});

You should be able to modify this code so that it works on the left side instead and animate the left property in the jQuery. I didn’t want to make it too easy as your question was very general. You should ask a separate question for the rest of your problem after you share the working code for what you’re able to implement on the first part.