Ashraf Eldawody Ashraf Eldawody -4 years ago 122
CSS Question

putting a text over image

i am trying to make a page that displays a series from table but i have a problem here. when i use foreach to display all results in table it works fine.
but the problem appears when i try to put a text over every image.
i made the image position: relative; and text position: absolute; but all text become at the first image only enter image description here

fidde link

<div class="container maincontainer">
<div class="container ser text-center">
<ul>
<?php
$i=0;
$stmt = $con->prepare("SELECT * FROM series ORDER BY added_date DESC");
$stmt->execute();
$rows = $stmt->fetchAll();
foreach($rows as $row){
echo '
<div class="imgdiv">
<a href="series.php?id=' . $row['seriesID'] .'">
<img class="images" src="'. $dirnam .'cp/uploads/posters/'.$row['poster'].'"></a><div style="position: absolute;z-index:1100;">calc</div>'; ?>
<?php
} ?>




css:

.images{
float: left;
height: 300px;
width: 16.66666%;
padding:1px;
border:1px solid #021a40;
background-color:#ff0;

}
.series{
margin: 0px auto;
padding:0;
width: 100%;
overflow: hidden;


}


.imgdiv:hover img {
opacity: 0.7;
}
.srchbox{
margin-left: 50px;
float:right;
height: 30px;
padding-top: 0px;
}
.ser{
margin: 0px auto;
padding:0;
width: 90%;
margin-top: 36px;
}

.maincontainer{
width: 100%;
background-color: rgba(34, 34, 34, 0.65);
}

Answer Source

None of those elements has position: relative, at least not in the code you posted. So there is no "position anchor" for the absoluteley positioned text elements.

EDIT AFTER COMMENT AND POSTED FIDDLE:

Most of the settings you applied to your images (float, size, relative position etc.) should instead be applied to the imgdiv class. The images themselves should just get 100% width and an auto height.

Take a look at this fiddle which contains the solution and tell me if you don't understand something:

https://jsfiddle.net/bn70byh8/1/

Note: If you absolutely want to stretch the image heights to cover their conatiners completely, you can use height: 100% on the images. However, this will change the width/height ratio and possibly distort the images.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download