Overflow image outside container on left side

Question

Bear with me here, this is kind of hard to explain properly...

THIS FIRST PART AS DESCRIBED BELOW IS WORKING FINE.
On this first image you see a browser screen that is wider than my (bootstrap) container. The blue is the whole screen window, the white is the container (with a max-width) with the basic 12 columns from bootstrap.
I want the laptop on the right to be wider then the x-number of columns it has on its bootstrap grid. When the (for example) 7 colums have a width of (for example) 500px and the image is 800px wide, it will naturally overflow the container (if the image is not given a width, ofcourse). So when you make your window smaller (see second image) you just cut of the image a little.

THIS SECOND PART AS DESCRIBED BELOW IS THE PROBLEM...
Now I want to have the same thing on the left side... But When I have 7 colums in my bootstrap, that are (for example) 500px wide, and I have an image inside that, with a width of 800px the overflow happens naturally on the right side again. I would like this to be on the left side!! So something like having a div with an image inside the is aligned to the right, but the overflow is on the left.

THIS IS WHAT IS HAPPENING RIGHT NOW: where the overflow is on the right (when it should be on the left).

• I do NOT want to strech this image longer than the natural width of the image
• I PREFER it being <img>-tags in stead of background-image, but if this is not possible I can accept that.

Some Code is provided in this JSFiddle

Answer 1

Use

.imgLeft{
    direction: rtl;
}

OR

.imgLeft{
    position: relative;
}

.imgLeft > img{
    position: absolute;
    right: 0;
}