Impose some text over an image located inside an absolute div

Question

I am trying to put some HTML text over an image that has been popped out using lightbox effect. For this i am using 3 box - the popped out div with lightbox effect address_box - the div inside the box which is nothing but an outline image address - i want this div to be imposed upon the address_box image

HTML:

<div class="box"> <div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div> <div id="address_box"><img src="img/address-box.png" /> <div id="address">The address text </div> </div>

CSS:

.box { position:absolute; top:20%; left:12%; text-align:center; width:940px; height:321px; background:#F9E5B9; z-index:51; padding:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display:none; } .box #move_in_img{ float:left; margin-left:20px; margin-top:50px; } #address_box{ position:relative; } #address{ position:absolute; }

the "box" properties are set to give it a lightbox effect and i cant change it from absolute to relative. I have searched a lot and experimented with positioning and z-index but all failed. The text simply appears below the address_box.

What i am trying to do is implement lightbox effect but dont want the text to be displayed as image. M i taking the right approach or there is a better way ??

Here is the paste bin link http://jsbin.com/anehey/1/edit Just picked a sample image from net for the frame. I want the text to go inside the frame..

i even dont understand after reading 2 time ... what you want to do exactly ? — NullPoiиteя
– NullPoiиteя, Commented Dec 8, 2012 at 16:29
I am trying to implement a jquery lightbox, the one where an image pops out in a small window and the rest of the page is faded a bit. But i dont want to display a pure image but a div with an image and some overlapped text. Now the problem is that the div which is popped out is already absolute and maybe that is why i am unable to put some overlapping text over the image. Got it now ?? — ishan
– ishan, Commented Dec 8, 2012 at 17:51
Yes thank you very much. This works for me. Some more tweaking to the the values you started and i could get the text where i wanted. Although i am wondering if it is a standard way of doing things ?? Thanks a lot again.... — ishan
– ishan, Commented Dec 8, 2012 at 18:40

Mr. Alien · Accepted Answer · 2012-12-08 19:16:58Z

Am not getting the thing you are trying to do here as no working demo is provided, generally when you want to do such thing, use position: relative; for the container div and use position: absolute; width: 100%; & bottom: 0; for the imposed text div

HTML

<div class="container"> <img src="#" /> <div class="text"></div> </div>

CSS

.container { position: relative; /*Set Height Width Accordingly*/ } .text { position: absolute; bottom: 0; height: /*Whatever*/; width: 100%; }

Demo (Not related to my answer but I fixed what he was asking for)

I know this and it works for me perfectly. But my problem is that i have the container div positioned as absolute already coz of the lightbox style implementation. Anyways i have provided a demo code. Can you get that text inside the frame ??
You see the text at the bottom ?? the address ?? I want that text to be overlapped on the image so that it appears to be inside that frame. The problem is that it is appearing below the frame.

Collectives™ on Stack Overflow

Impose some text over an image located inside an absolute div

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related