1

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?

Improve this question
6
  • 1
    What do you mean with "I am not allowed to modify divs style"? Commented Jul 29, 2015 at 7:37
  • use relative position on span and a negative left value Commented Jul 29, 2015 at 7:38
  • 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 Commented Jul 29, 2015 at 7:38
  • @FabrizioCalderan Doing that collapses my images :| Commented Jul 29, 2015 at 7:39
  • have you used left instead of margin-left? Commented Jul 29, 2015 at 7:41

5 Answers 5

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

The scroll is vertical :(, Can we make it horizontal scrollable?
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
Yes, in fiddle the scroll is vertical. Can we make it horizontal?
Fiddle updated, links maybe still useful if your end-scenerio is very different.
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.
|
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>
Improve this answer

4 Comments

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 I've updated my answer. You can include the background-image in the style attribute if the data is dynamic.
Another issue, the images are vertical scroll. I need them to be horizontal scroll. Can it be achieved?
@Abhishek What are the dimensions of the image? What do you mean they are scroll?
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/

Improve this answer

4 Comments

If I've multiple images, all the images are coming one below the other. I need horizontal scroll, not vertical. Edited jsfiddle: jsfiddle.net/p5Lkgwuy/1 .Can you please help me with it?
put in div {float:left}
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 s30.postimg.org/bb2yll5ap/Selection_003.png :|
than you forgot the "#inner_container div" position:relative.
0

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%; }
Improve this answer

Comments

0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.