CODEWITHSUNDEEP
htmlcssimagebackground-imagesrc
Matthew Grima
Matthew Grima

Reputation: 1523

HTML/CSS - Hiding part of an image source

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?

Upvotes: 1

Views: 466

Answers (2)

frozenkoi
frozenkoi

Reputation: 3248

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.

Upvotes: 3

Finbarr
Finbarr

Reputation: 32126

Several options:

  • Process the images server side to apply the transformation.
  • Overlay an absolutely positioned mask image on top of the images.
  • Use some clever CSS with rounded corners and absolutely positioned transparent elements to achieve the same effect as the mask image.

Upvotes: 1

Related Questions