Round Mask On An Image Growing From Centre Of That Image

On a click of some button I need to show an image of a vinyl record. The image will appear somewhere next to the button and is a transparent png to make it look round. The problem

Solution 1:

Perhaps you could create a large white (or background-colored) PNG with an alpha transparency hole in the center. Place this on top of the image to be revealed, then scale it up while keeping it pinned at its center point. Once it's scaled to the point where the entire underlying image is within the transparent hole, remove the covering image.

I have no idea how this would perform (probably badly!), but it's a thought.

Solution 2:

HTML comes in rectangles as a rule, if you have an image with transparency, then you can scale it, keeping it's centre constant.

If you need it to be selectable only within the circle, then you will need to check the mouse coordinate for click operations to see if it is within the circle, within it's containing rectangle. See: How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

---

@6bytes suggested using rounded corners.

Chrome and FireFox currently surround round-corners via the border-radius and -moz-border-radius CSS attributes, so you can achieve a circle visually with 50% border radius. However, this is only a visual difference on an underlying rectangle, clicks within the rectangle still count as being on the circle itself.

#circle {
    -moz-border-radius: 50%;
    border-radius: 50%;
}

Basic Rectangle Demo: http://jsfiddle.net/rL4BU/2/

You can put some code in to check if clicks are within the circle to fix this.

Circle Clicks Demo: http://jsfiddle.net/rL4BU/4/