How do I show text over image using divs?

Question

I've few images inside a scroll box and I need some text to be over that image. Number of images can be dynamic , it needn't be 6 in number and they have to be in horizontal scroll not vertical. Following is my code,

<style type="text/css">
.imgtext {
margin-left: -300px;
}
</style>
<div id="hcontainer" style="width: 600px;">
    <div id="inner_container" style="overflow: auto; width: 2500px;">
        <img src="1.jpg" width="400px" height="200px" /><span class="imgtext">My new_1 text</span>
        <img src="2.jpg" width="400px" height="200px" /><span class="imgtext">My new_2 text</span>
        <img src="3.jpg" width="400px" height="200px" /><span class="imgtext"> My new_3 text</span>
        <img src="4.jpg" width="400px" height="200px" /><span class="imgtext"> My new_4 text</span>
        <img src="5.jpg" width="400px" height="200px" /><span class="imgtext">My new_5 text</span>
        <img src="6.jpg" width="400px" height="200px" /><span class="imgtext">My new_6 text</span>
    </div>
</div>

As you can see the text is coming over the image, but the images are collapsing because of it, which doesn't look good. I've looked into solution of relative parent positioning and absolute child positioning, but I'm not allowed to modify divs style/css properties. So, using absolute and relative solution in div style wouldn't work! I'm allowed to play around with img & span tags and there css properties.

I'm okay with use of jquery/javascript which can move the text and place it on the corresponding image. But I'm not able to solve it by myself. can anyone help me with it?

Answer 1

Use a background-image (if you can):

So instead of:

<img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>

Use:

<div class="img img_1">My new_1 text</div>

With CSS:

.img{
   background-repeat:no-repeat;
   width:400px;
   height:200px;
}

.img.img_1{
   background-image:url(1.jpg);
}

---

If you have dynamic data for the image paths then these can be included in the style attribute instead:

<div class="img" style="background-image:url(1.jpg)">My new_1 text</div>

Answer 2

The following has a good example here: https://css-tricks.com/text-blocks-over-image/

html

<div class="image-wrap">

      <img src="images/3754004820_91a5c238a0.jpg" alt="" />

      <span>A Movie in the Park:<br />Kung Fu Panda</span>

</div>

css

.image-wrap { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.image-wrap > span { 
   position: absolute; 
   top: 175px; 
   left: 0; 
   width: 100%; 
   display:block;
}

Your ensuring the image style doesnt conflict, then applying absolute position and offsetting the text span to wherever you want (change top and left as needed)

I made a fiddle showing this:

jsfiddle : https://jsfiddle.net/dabros/me0j4opp/

Also, these posts answer similar questions:

Z-Index issue: CSS Text over image

On Mouse Event: How to display text over image

Edit

Following comment re. scrollbar to this post I updated my fiddle and added a few links that should help

This is the changed css:

.image-wrap { 
   position: relative; 
   width: 400px;
    display:inline-block;
}

.image-wrap > span { 
   position: absolute; 
   top: 175px; 
   left: 10px; 
   width: 100%; 
   display:block;
    z-index:99;
}

And as to the links, titles explain them pretty well

Hiding the scrollbar on an HTML page

Hide scroll bar, but still being able to scroll

https://css-tricks.com/forums/topic/hide-vertical-scrollbar-but-still-scrollable/

Answer 3

<div id="hcontainer" style="width: 600px;">
    <div id="inner_container" style="overflow: auto; width: 2500px;">
        <div><img src="http://www.abload.de/img/die_farbe_rot9ebr.jpg" width="400px" height="200px" /><span>My new_1 text</span><div>

    </div>
</div>

span{
    position:absolute;
    left:0px;
}
div{
    position:relative;
}

http://jsfiddle.net/p5Lkgwuy/

Answer 4

Here is a working example,

https://jsfiddle.net/mhdazeem/10zL9fho/

<div id="hcontainer" style="width: 600px;">
<div id="inner_container" style="overflow: auto; width: 2500px;">
    <div class="image">
        <img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span>

    </div>
    <div class="image">
        <img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span>

    </div>
    <div class="image">
        <img src="3.jpg" width="400px" height="200px" /><span>My new_3 text</span>

    </div>
    <div class="image">
        <img src="4.jpg" width="400px" height="200px" /><span>My new_4 text</span>

    </div>
    <div class="image">
        <img src="5.jpg" width="400px" height="200px" /><span>My new_5 text</span>

    </div>
    <div class="image">
        <img src="6.jpg" width="400px" height="200px" /><span>My new_6 text</span>

    </div>
</div>

CSS

.image {
position: relative;
width: 100%;
/* for IE 6 */
}

    .image span {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
}

Answer 5

Please check the code and let me know :)

 $(document).ready(function() { $('#inner_container img').each(function() { var imgHeight = $(this).height(), imgwidth = $(this).width(), imgPositionTop = $(this).offset().top, imgPositionLeft = $(this).offset().left; $(this).next('span').css({ 'width': imgwidth, 'height': imgHeight, 'position': 'absolute', 'top': imgPositionTop, 'left': imgPositionLeft }); }); }); 

 #inner_container span { background: rgba(0, 0, 0, .8); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div id="hcontainer" style="width: 600px;"> <div id="inner_container" style="overflow: auto; width: 2500px;"> <img src="1.jpg" width="400px" height="200px" /><span>My new_1 text</span> <img src="2.jpg" width="400px" height="200px" /><span>My new_2 text</span> <img src="3.jpg" width="400px" height="200px" /><span>My new_3 text</span> <img src="4.jpg" width="400px" height="200px" /><span>My new_4 text</span> <img src="5.jpg" width="400px" height="200px" /><span>My new_5 text</span> <img src="6.jpg" width="400px" height="200px" /><span>My new_6 text</span> </div> </div>