css - Overlap an image over a bootstrap thumbnail -

At first I was trying to make it again within JSfiddle, but unable, so apologies for that. I am using bootstrap inside my site and am using thumbnail class to set my images. The fight I am struggling with is putting another image above the image within the thumbnail Ive played the best of my knowledge around the situation but can not be around this

Page

  http://46.32.253.11/our_team   
 You will see that there is a pin on the left, I will paste it at the top of the picture, as if Paste a picture on the wall.  
 Ideally, I should know the rules of aligning such pictures so that I can learn from it or if someone replies to the answer, they will briefly explain what is happening, again I Can i learn  
 Any help I need to complete this project.  
 Thanks   
 
 
 You can use this following markup in your current markup By  & lt; Img class = "team" alt = "src =" / assets / teresa.jpg "& gt;   
  and make the following changes in your CSS.  
  HTML     & lt; Div class = "span4" & gt; & Lt; Div class = "thumbnail" & gt; & Lt; Div class = "pin" & gt; & Lt; / Div & gt; & Lt; Img class = "team" alt = "src =" / property / teresa.jpg "& gt; & Lt; H4 square = "team" & gt; Teresa Begas & lt; / H4 & gt; & Lt; P class = "team" href = "# myModal99" Data-Toggle = "Model" & gt; Operations Director & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  CSS:   
 . Thumbnail {border: moderate no; Box-Shadow: None; Display area; Line-height: 1; Status: Relative; Z-index: 1; / * Added Lower Z-index value * /. Pin {background: url ("/ assets / purplepin.png") No-repeat scrolls 0 0 transparent; Height: 100 pixels; / * Added height of image * / width: 100px; / * Image width * / left: 100px; / * Added Left Status * / Status: Absolute; / * Added position * / heading: -20px; / * Added to the top position * / z-index: 2; / * High z-index value added from thumbnail div / /