crop image when overlap in responsive web design

Question

i am creating a responsive web design containing images....i want to know if there is any way i can crop images when they overlap ie if i have two images in one line image 1 and image 2 image 1 is at the left and image 2 is at right and i start lessening width of my browser, and when image 2 reaches image 1, image 2 starts cropping or hiding or whatever....how mi going to do that? here is my code for what i am trying:

#logo{
float:right;
margin:88px 0 0 70px;
position:absolute;
}
#header-add{
float:right;
margin:35px -10% 0 0;
cursor:pointer;

}

Logo is image 1 and header-add is image 2

Answer 1

Rather than crop the image, I'd suggest simply setting your CSS to set the width of the images appropriately when the browser width is decreased. This way you don't have to worry about cropping.

For example (values arbitrary, but percentage-based, which I find best for responsive design):

@media screen and (max-width: 768px) {
    #header-add {
        width: 40%;
    }
}
@media screen and (max-width: 480px) {
    #header-add {
        width: 25%;
    }
}

If you don't want to set the width of the images via CSS, you can essentially "crop" the images if you enclose each of them in a div and you can set overflow:hidden on the div, and then set the width of the div in the CSS (like the aforementioned image width example).

Hope it helps!

Addition:
In answer to your comment about cropping from the left, here's how I would recommend doing it. The downside is that you have to add an explicit height on the div that crops the image, but it should work for you.

The HTML:

<div id="crop_div">
<img src="foo.jpg" alt="bar" />
</div>

The CSS:

#crop_div {
    float: right;
    height: 100px; /* Needed since contents use absolute position */
    overflow: hidden; /* To crop the img inside of it */
    position: relative; /* Set for img position below */
    width: 400px;
}
#crop_div img {
    position: absolute; /* To anchor it on the right */
    right: 0;
}
@media screen and (max-width: 768px) {
    #crop_div {
        width: 40%;
    }
}

Answer 2

clip() and overflow: hidden for masking for sure your content.

min-width and/or max-width to manage the width of each div when the sum of both would be too large for the width of the container.