What would be the best and most correct way of hiding part of an image source in an img tag
Say I have the following:
<img alt="" src="myimage.jpg" class="photo" />
My target is to have the image enclosed in a rounded corner container, which will obviously cover the corners of image at the top.
Should I just go and put an absolute positioned element on top of the image as if you're putting a cut-out paper on top of a photo or is there some kind of alternative?
If your intention is that the image gets rounded corners, you could just use border-radius on it. If you need the container to have the rounded corners and that the image gets clipped, use overflow: hidden for it.
You can find a demonstration for it in this fiddle: http://jsfiddle.net/frozenkoi/hwDYV/
What you want is something similar to this
<div class="contact">
<img src=http://jsfiddle.net/img/top-bg.png /><a href="#">Username</a>
</div>
With this CSS:
DIV.contact {background: silver; border-radius: 8px; margin: 10px auto 0 5px; width: 200px; text-align: center; overflow: hidden}
DIV.contact IMG {display: block; width: 100%; }
Note that the image is just a blue rectangle.
Several options:
