获取图片的标题重叠在幻灯片的图片上
I have a working slideshow with next and previous buttons and I'm trying to work with css to get the descriptions and the title inside the image like so http://imgur.com/1WpiLYY. What I've found online is to put the image in the background, but I don't know how to do that with a slideshow.
HTML
<html>
<head>
<link href="gallery.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
<title></title>
</head>
<body>
<p>dog</p>
<form action="gallery.php" method="post">
<div class="prev">
<input name="action" type="submit" value="Previous">
</div>
<div class="prev">
<input name="action" type="submit" value="Next">
</div><input name="i" type="hidden" value="1">
<div class="description">
<p>dog</p>
<p></p>
<a href="?index=<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Use of undefined constant php - assumed 'php' in on line <i>161</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0094</td><td bgcolor='#eeeeec' align='right'>245920</td><td bgcolor='#eeeeec'>{main}( )</td><td bgcolor='#eeeeec'>.../gallery.php<b>:</b>0</td></tr>
</table></font>
">next</a>-->
</form>
</body>
</html>
CSS
img {
height: 250px;
width: 450px;
display:inline-block;
}
/*div.img {
border: 5px solid black;
display: inline-block;
position: relative;*/
/*width: 450px;
height: 250px;*/
/*opacity: 0.6;
filter: alpha(opacity=60);*/
/*}*/
div.description {
color:blue;
}
div.prev {
text-align: left;
}
div.next {
margin-left:400px;
margin-top:0px;
}
PHP
//if ($result->num_rows > 0) {
// output data of each row
$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
$pic_array[$count] = $row['pic_url'];
$titles[$count] = $row['title'];
$descriptions[$count] = $row['description'];
$count++;
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['action'] == 'Previous') {
$index = $_POST['i'];
if ($index == 0) {
$index = count($pic_array) - 1;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
}
else {
$index--;
echo "<p> $titles[$index] </p>";
echo "<img src= " . $dir . $pic_array[$index] . " />";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index'' >";
echo "<p> $descriptions[$index]";
}
if ($_POST['action'] == "Next") {
$index = $_POST['i'];
if ($index == count($pic_array) - 1) {
$index = 0;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
}
else {
$index++;
echo "<p> $titles[$index] </p>";
echo "<img src= " . $dir . $pic_array[$index] . " />";
}
echo '<form action="gallery.php" method="post">
<input type="submit" name="action" value="Previous">
<input type="submit" name="action" value="Next">';
echo "<input type='hidden' name='i' value= '$index' >";
echo " $descriptions[$index]";
}
} else {
$index = 1;
echo "<p> $titles[$index] </p>";
echo "<img src= ".$dir.$pic_array[$index]." />";
echo '<form action="gallery.php" method="post">
<div class="prev">
<input type="submit" name="action" value="Previous">
</div>
<div class="prev">
<input type="submit" name="action" value="Next">
</div>';
echo "<input type='hidden' name='i' value= '$index' >";
echo "<div class='description'
<p> $descriptions[$index] </p>
</div>";
}
$conn->close();
?>
To get the text to overlay the image you need to absolute position the text inside of a container that has position: relative; applied to it. This container element should be one of the outer elements of your slideshow's markup.
Why? If you don't the text overlay could end up anywhere on your page.
Here is basic example.
<div class="slide">
<img src="http://placehold.it/600x250">
<div class="slide-caption">
<h3 class="slide-title">Slide Title</h3>
<p>
Slide caption. Slide caption. Slide caption. Slide caption. Slide caption. Slide caption.
</p>
</div>
</div>
.slide {
display: inline-block;
position: relative;
}
.slide img {
display: block;
max-width: 100%;
}
.slide-title {
margin: 0 0 1rem;
}
.slide-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: white;
background-color: rgba( 0, 0, 0, 0.5 );
}
Demo JSFiddle.
Our .slide element has display: inline-block; so it will wrap our image nicely regardless of the image's size. This way .slide is the same size as the image. .slide has position: relative; applied to it so any absolute positioned elements stay within this element.
The magic for the caption placement is in the absolute positioning of our .slide-caption container element. bottom: 0; sucks it to the bottom of it's parent element .slide. right: 0; left: 0; stretch it to the full width of .slide.
There's a number of ways to achieve your overlay text. This is one approach.