Dears, I'm using the code below to show list of images from database and showing some text (also from DB) over the images when hover. I need to keep the current settings but to also add one more text (from DB) but to be shown always (static) over the image:
CSS:
.wrapper {
position: relative;
padding: 0;
width:100px;
display:block;
}
.text {
position: absolute;
top: 0;
color:#333;
background-color:rgba(255,255,255,0.2);
width: 500px;
font-size:18px;
height: 100%;
line-height:100px;
text-align: center;
z-index: 10;
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
.img {
z-index:1;
}
.grid {
position:relative;
float:left;
width: 500px;
height:333px;
margin-bottom: 10px;
margin-right: 10px;
border: 0;
text-align:center;
vertical-align:middle;
}
Code:
foreach($dbrow as $row) {
?>
<div class="grid">
<a href="<?php echo $row['hotel_url']; ?>" class="wrapper">
<span class="text">
<b><?php echo $row['name']; ?></b>
<br/>
<?php echo $row['desc_en']; ?>
<br/>
<i>Book Now</i>
</span>
<img align="center" src="<?php echo $row['photo_url']; ?>">
</a>
</div>
<?php
}