CODEWITHSUNDEEP
css
Ballu Rocks
Ballu Rocks

Reputation: 1226

How to float text on image in css3

How to align the text over the images ? I tried by using absolute position but it is under the images because of images are in absolute position .text must be under the image in the box ,Like this image http://s8.postimage.org/tsrcam791/image.png or text must float on the image

css

.image_stack img { /* css style for photo stack */
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 170px;
height: 160px;

}
.image_stack { /* css style for photo stack */
width: 200px;
position: relative;
padding-left:20px;
margin-bottom:40px;
float:left;

}
 .image_stack img { /* css style for photo stack */
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
/* Firefox */
-moz-transition: all 0.2s ease;
/* WebKit */
-webkit-transition: all 0.2s ease;
/* Opera */
-o-transition: all 0.2s ease;
/* Standard */
transition: all 0.2s ease;
}
.image_stack #photo1 {  /* position of last photo in the stack */
top: 8px;
left: 108px;
}
.image_stack #photo2 {/* position of middle photo in the stack */
top: 6px;
left: 104px;
} 
.image_stack #photo3 {/* position of first photo at the top in the stack */
top: 4px;
left: 100px;
right: 100px;
}
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
-webkit-transform: rotate(15deg); /* safari and chrome */
-moz-transform: rotate(15deg);/*firefox browsers */
transform: rotate(15deg);/*other */
-ms-transform:rotate(15deg); /* Internet Explorer 9 */
-o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* css not used*/
-webkit-transform: rotate(0deg); /* safari and chrome */
-moz-transform: rotate(0deg);/*firefox browsers */
transform: rotate(0deg);/*other */
-ms-transform:rotate(0deg); /* Internet Explorer 9 */
-o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
-webkit-transform: rotate(-15deg); /* safari and chrome */
-moz-transform: rotate(-15deg); /*firefox browsers */
transform: rotate(-15deg);/*other */
-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
-o-transform:rotate(-15deg); /* Opera */
cursor: pointer;
 }


<div class="image_stack" style="margin-left:0px;" >
<img id="photo1" class="stackphotos" src="photos/2.jpg"  >
<img  id="photo2" class="stackphotos" src="photos/3.jpg" >
 <img   id="photo3" class="stackphotos"  src="photos/1.jpg" >

<div  style="position:absolute;left:150px;top:130px;display:block;background:#eee;width:180px;">  text</div>

 </div>
 <div class="image_stack"style="margin-left:0px;" >
 <img id="photo1" class="stackphotos" src="photos/2.jpg"  >
 <img  id="photo2" class="stackphotos" src="photos/3.jpg" >
 <img   id="photo3" class="stackphotos"  src="photos/1.jpg" > 
 </div>
<div class="image_stack"style="margin-left:0px;" >
<img id="photo1" class="stackphotos" src="photos/2.jpg"  >
 <img  id="photo2" class="stackphotos" src="photos/3.jpg" >
 <img   id="photo3" class="stackphotos"  src="photos/1.jpg" > 
 </div> 
 </div>

Upvotes: 0

Views: 633

Answers (1)

Billy Moat
Billy Moat

Reputation: 21050

You need to also implement the z-index property on your images and on the text div. Give the images a lower z-index than the text div. That should sort it for you.

Upvotes: 1

Related Questions