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">
$stmt = $con->prepare("SELECT * FROM series ORDER BY added_date DESC");
$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>'; ?>
} ?>


float: left;
height: 300px;
width: 16.66666%;
border:1px solid #021a40;

margin: 0px auto;
width: 100%;
overflow: hidden;


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

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.


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:

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