title: overlaying an image with a button on html page
body: <p>so I have an image which i would like to overlay with an html button attribute like so: </p>
  
  <p>here is a blank image
  <img src="https://i1284.photobucket.com/albums/a576/brendosthoughts/img1_zps39ff9dfe.png" alt="plain image"></p>
  
  <p>i would like to overlay a button like so on the image 
  <img src="https://i1284.photobucket.com/albums/a576/brendosthoughts/img2_zps34f9975c.png" alt="what i would like"></p>
  
  <p>and then if the button is clicked have it then look like this 
  <img src="https://i1284.photobucket.com/albums/a576/brendosthoughts/img3_zpsabbe49b1.png" alt="image when button is clicked"></p>
  
  <p>from what i can gather this could be done using CSS using {index-z} somehow, or possible with html5 canvas tag. and then to handle the actually button click with java script. 
  However i am not completely sure how to accomplish this (the handling of button click with javascript i do know). Could someone link to a tutorial on how to do this or give an explanation it would be greatly appreciated. </p>
  
  <p>Note: the image itself is also an href / link if this changes how this should be done, additionally te image itself will be in a sort of gallery with around 50 similar images or so   </p>