Overlay Text on a Thumbnail Image HTML/CSS

Question

I am trying to overlay some text onto a thumbnail class image. My HTML looks like so:

            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="GreatDanesEdit.jpg" width="700" height="700">
                    <h1>Game Day</h1>
                </div>
            </div>

What on Earth do I use for my CSS to get my "h1" to overlay my image? I can only seem to get it to be written underneath it. Ideally i'd like my text to be centred on the image too.

Currently my CSS looks like so, how do I centre the text over the image?

.thumbnail{
  position:relative;
}

.thumbnail h1{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    margin:0;
    color:#551A8B;
    text-shadow: 0 0 5px #fff;
    font-size: 48px;  
    font-family: 'Shift', sans-serif;
    font-weight: bold;
    text-align:centre;
}

Thanks!

Answer 1

Use relative positioning for your .thumbnail element and absolute positioning for your h1 element:

 .thumbnail{ width:300px; position:relative; } .thumbnail img{ max-width:100%; } .thumbnail h1{ position:absolute; top:50%; left:0; color:lightgrey; width:100%; text-align:center; transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */ margin:0; } 

 <div class="col-md-4"> <div class="thumbnail"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg"> <h1>Game Day</h1> </div> </div> 

Answer 2

Try using a negative margin-top style on your h1 tag. Also align it to the center if you want it to be centered using align="center" .

Updated Code:

        <div class="col-md-4">
            <div class="thumbnail">
                <img src="GreatDanesEdit.jpg" width="700" height="700">
            <h1 align="center" style="margin-top:-350px;">Game Day</h1>
            </div>
        </div>

example fiddle: https://jsfiddle.net/pbubqt5y/