Skip to main content

Return to Question

added 162 characters in body
Source Link
ishan
ishan
  • 1.2k
  • 5
  • 25
  • 47

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

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

Source Link
ishan
ishan
  • 1.2k
  • 5
  • 25
  • 47

Impose some text over an image located inside an absolute div

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