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?

What do you mean with "I am not allowed to modify divs style"? — Lelio Faieta, Jul 29 '15 at 07:37
I'm working with a team and there are many other dependencies on the div. So, modifying the div style would effect other stuff in the webpage. I took the sample out of it and sharing it here — Abhishek, Jul 29 '15 at 07:38
@FabrizioCalderan yup, tried it. It doesn't put text on image :( — Abhishek, Jul 29 '15 at 07:59

Curtis · Answer 1 · 2015-07-29T07:41:53.810

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>

edited Jul 29 '15 at 07:41

answered Jul 29 '15 at 07:37

Curtis

101,612
66
270
352

The problem with this approach is that I'll have to create multiple styles for multiple images and no. of images can be dynamic :| – Abhishek Jul 29 '15 at 07:40
@Abhishek I've updated my answer. You can include the `background-image` in the `style` attribute if the data is dynamic. – Curtis Jul 29 '15 at 07:42
Another issue, the images are vertical scroll. I need them to be horizontal scroll. Can it be achieved? – Abhishek Jul 29 '15 at 07:50
@Abhishek What are the dimensions of the image? What do you mean they are scroll? – Curtis Jul 29 '15 at 08:04

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

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/

edited May 23 '17 at 12:29

Community

1
1

answered Jul 29 '15 at 07:39

Daniel Brose

1,394
10
24

The scroll is vertical :(, Can we make it horizontal scrollable? – Abhishek Jul 29 '15 at 07:47
In my fiddle, or in your page? You define size of object, so check that and overflow-x i think is the rule? Im adding some links re. that now – Daniel Brose Jul 29 '15 at 07:50
Yes, in fiddle the scroll is vertical. Can we make it horizontal? – Abhishek Jul 29 '15 at 07:52
Fiddle updated, links maybe still useful if your end-scenerio is very different. – Daniel Brose Jul 29 '15 at 07:53
Added details in edit, I left in a bit of commented css in fiddle, in case you need to play with it in your site - but those links should help if too different. – Daniel Brose Jul 29 '15 at 07:58
Awesome.. Let me integrate it with my site and get back! – Abhishek Jul 29 '15 at 08:02

score 0 · Answer 3 · answered Jul 29 '15 at 07:40

0

<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/

answered Jul 29 '15 at 07:40

cgee

1,910
2
22
38

If I've multiple images, all the images are coming one below the other. I need horizontal scroll, not vertical. Edited jsfiddle: http://jsfiddle.net/p5Lkgwuy/1/ .Can you please help me with it? – Abhishek Jul 29 '15 at 07:44
put in div {float:left} – Anubhav pun Jul 29 '15 at 07:54
Fiddle shows fine, but when I try it on sample.html page and loaded in chrome, all the text are one-over the other. See http://s30.postimg.org/bb2yll5ap/Selection_003.png :| – Abhishek Jul 29 '15 at 07:56
than you forgot the "#inner_container div" position:relative. – cgee Jul 29 '15 at 09:19

score 0 · Answer 4 · answered Jul 29 '15 at 07:50

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%;
}

w3debugger · Answer 5 · 2015-07-29T08:12:17.583

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>

How do I show text over image using divs?

5 Answers5