Menu icon Foundation
Overlay a row of text across an image

I'm trying to overlay a row containing text over the bottom part of an image. So in the code below, row marked labelrow would appear over the top of the image, at the very bottom. How can I do this in Foundation 5?

<body>
    <div class="row">
        <div class="small-6 columns">
            <img src="http://placehold.it/350x150">
            <div class="row labelrow">
                <div class="small-4 columns">No 1</div>
                <div class="small-8 columns">Image 1 Title</div>
            </div>
        </div>
        <div class="small-6 columns">
            <img src="http://placehold.it/350x150">
            <div class="row labelrow">
                <div class="small-4 columns">No 2</div>
                <div class="small-8 columns">Image 2 Title</div>
            </div>
        </div>
    </div>
</body>
            

         

image overlay

I'm trying to overlay a row containing text over the bottom part of an image. So in the code below, row marked labelrow would appear over the top of the image, at the very bottom. How can I do this in Foundation 5?

<body>
    <div class="row">
        <div class="small-6 columns">
            <img src="http://placehold.it/350x150">
            <div class="row labelrow">
                <div class="small-4 columns">No 1</div>
                <div class="small-8 columns">Image 1 Title</div>
            </div>
        </div>
        <div class="small-6 columns">
            <img src="http://placehold.it/350x150">
            <div class="row labelrow">
                <div class="small-4 columns">No 2</div>
                <div class="small-8 columns">Image 2 Title</div>
            </div>
        </div>
    </div>
</body>
            

         

Karl Ward gave the most helpful answer for this post
Karl Ward over 5 years ago

.labelrow {
   position: absolute;
   bottom: 0%;
}

You might need to add a style to the parent columns container:

.columns {
   position: relative;
}

Preferably, you should move the labelrow before the image also:

<div class="small-6 columns">
            <div class="row labelrow">
                <div class="small-4 columns">No 2</div>
                <div class="small-8 columns">Image 2 Title</div>
            </div>
            <img src="http://placehold.it/350x150">
</div>

Sergej Lotz over 5 years ago

Just set the img as 'background-image: url(http://placehold.it/350x150);' using css on the div with the class 'row labelrow yourimageone'.

Karl Ward over 5 years ago

.labelrow {
   position: absolute;
   bottom: 0%;
}

You might need to add a style to the parent columns container:

.columns {
   position: relative;
}

Preferably, you should move the labelrow before the image also:

<div class="small-6 columns">
            <div class="row labelrow">
                <div class="small-4 columns">No 2</div>
                <div class="small-8 columns">Image 2 Title</div>
            </div>
            <img src="http://placehold.it/350x150">
</div>

Greg over 5 years ago

Thanks for your help so far. That gets the overlay in the right place it's not the full width of the row. I've Added a JSFiddle here which shows the problem - http://jsfiddle.net/ECa5B/2/

How can I get the overlay row to be the full width of the image?

richardalgor about 5 years ago

Try this simple overlay techniques .......

http://www.corelangs.com/css/box/overlay.html

Hope it will help you.

Richard