How can I display the checkbox over the images for selection?

Question

I want to display a checkbox for selection on the right bottom of every image..

How can i do something like this?

Please remember that clicking on image has

Answer 1

This can be done with pure CSS, assuming you have fixed width and height for all images. The trick is setting absolute position for the checkbox then assign bottom and right to zero.

HTML sample:

CSS:

.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

Live test case.

As for click events, just apply click handler to each checkbox and it will work just fine.. see in this updated fiddle.