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

by

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:

<div class="container">
    <img src="https://stackoverflow.com/questions/8877807/image1.jpg" /> 
    <input type="checkbox" class="checkbox" id="check1" />
</div>
<div class="container">
    <img src="image2.jpg" />
    <input type="checkbox"  class="checkbox" id="check2" />
</div>

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.

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  3. CSS – How to Style a Selected Radio Buttons Label?
  4. Table with fixed header and fixed column on pure css
  5. Favicon not showing up in Google Chrome [duplicate]
  6. Why can’t I center with margin: 0 auto?
  7. Apply CSS styles to an element depending on its child elements [duplicate]
  8. Make a div fill up the remaining width
  9. How to make fill height
  10. Highlight label if checkbox is checked
  11. Disabled form fields not submitting data [duplicate]
  12. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  13. White space at top of page
  14. How to apply two CSS classes to a single element
  15. How does the vertical-align property work?
  16. Why are dashes preferred for CSS selectors / HTML attributes?
  17. Style not working for innerHTML in Angular [duplicate]
  18. How to Set Height for the Drop Down of Select box
  19. How to center-align one flex item and right-align another using Flexbox [duplicate]
  20. When I try to shift the image upwards using negative margin the whole container is moved upwards
  21. How to center image horizontally within a div element?
  22. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  23. What’s the difference between HTML’s and CSS’s width attribute?
  24. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  25. How do I make flex box work in safari?
  26. Zebra striping a flexbox table with wrapping items
  27. Bootstrap row and col explanation
  28. Is it possible to hide the title from a link with CSS?
  29. display: flex not working on Internet Explorer [duplicate]
  30. Fitting child into parent

Leave a Comment