Question

Firstly I have tried to re create this within a JSfiddle but unable to, so apologies for that. I am using bootstrap within my site and using the thumbnail class to set out my images. What I am struggling with is placing another image over the top of the image within the thumbnail. Ive played around with the positions to the best of my knowledge but cannot get around this

The page is at

http://46.32.253.11/our_team

What you will notice is a pin on the left, I would like that to stick to the top of the pic, like sticking a picture to a wall.

Ideally I would like to know the rules for aligning such images so that I can learn from this, or if anyone doe shave an answer could they explain briefly what is happening, so again i can learn from this.

Any help is appreciated as I need to get this project completed.

Thanks

Answer 1

You can make it by using following markup in your current markup. Write your <img class="team" alt="" src="/assets/teresa.jpg"> outside of <div class="pin"></div> and make following changes in your CSS.

HTML

<div class="span4">

    <div class="thumbnail">

        <div class="pin"></div>
        <img class="team" alt="" src="/assets/teresa.jpg">         
        <h4 class="team">Teresa Beggs</h4>
        <p class="team" href="#myModal99" data-toggle="modal">Operations Director</p>

    </div>       

</div>

CSS:

.thumbnail {
    border: medium none;
    box-shadow: none;
    display: block;
    line-height: 1;
    position: relative;
    z-index: 1; /* Added Lower Z-Index Value */
}

.pin {
    background: url("/assets/purplepin.png") no-repeat scroll 0 0 transparent;
    height: 100px; /* Added Height of image */
    width: 100px; /* Added Width of image */
    left: 100px; /* Added Left Position */ 
    position: absolute; /* Added Position */
    top: -20px; /* Added Top Position */        
    z-index: 2; /* Added Higher Z-Index Value from thumbnail div */
}