Getting images inline and responsive with a text over the top

Question

I am trying to get three images in a line within a div without spaces and have text display over each of the images that will click through to a different page. I understand the solution to this probably lies in the position of both elements but I cannot seem to get the text to stay over the correct image. If someone could help me with this that would be great?

Below is the HTML.

 <div class="services">
            <div id="text-overlay">
                <img src="Untitled-5.jpg">
                <p>Landscaping</p>
            </div>
            <div id="text-overlay">
               <img src="Untitled-6.jpg">
            </div>
            <div id="text-overlay">
                <img src="Untitled-7.jpg">
            </div>
        </div>

And the CSS:

#text-overlay {
    position: relative;
}

img {
    display: block;
    width: 33.3333333333%;
    float: left;
    height: 250px;
}

#text-overlay p {
    position: absolute;
    top: 1%;
    left: 1%;
    background-color: firebrick;
    color: white;
    padding: 1%;
}

Any help would be appreciated. Is this the best way to do it or are there better alternatives?

Start by learning basics such as the fact that IDs have to be _unique_ within an HTML document. — CBroe, Feb 06 '17 at 12:25

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

Your code has few errors:First of all you should use unique ID for indivisual element.Secondly you should use background-image for these conditions.Refer here for more details.

If you want to overlay over image learn from here.

edited May 23 '17 at 12:09

Community

1
1

answered Feb 06 '17 at 12:35

shubham agrawal

3,435
6
20
31

Getting images inline and responsive with a text over the top

1 Answers1