how to hide image left part of image when using overflow hidden - css

Question

I am new to CSS programming . Using overflow:hidden for hiding image greater than DIV area. Perhaps I want hidden part of image should be in the left part, but currently its taking right part. My code follows as below.
Html code:
<div class="a1">
<img src="img/image4.jpg">
</div>
CSS:
.a1{height:200px;width:100px; overflow:hidden;}

Answer 1

Try this (notice the direction: rtl;):
.a1 {
height:200px;
width:100px;
overflow:hidden;
direction: rtl;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>

Answer 2

.a1 {
height:200px;
width:100px;
overflow:hidden;
background:#ff0;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">
</div>
Seems to work fine for me. I added the yellow background to show where the DIV is at and linked to an SO sprite.
If you're getting a different effect, then it's quite likely the CSS on your page elsewhere which is cascading and causing the conflict.
Side note: Writing a stylesheet in CSS is not really called "programming". :)
Click Run code snippet to see this in action.
Or, for the converse:
.a1 {
height:200px;
width:100px;
overflow:hidden;
background:#ff0;
}
<div class="a1">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b" align="right">
</div>

Answer 3

.a1 {
height:200px;
width:100px;
overflow:hidden;
direction: rtl;
}
<div class="a1">
<img src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>

Answer 4

use float:right for image element
<div style="width:200px; height:200px; overflow:hidden">
<img style="float:right" src="url" />
</div>