如何使用php / javascript / css创建图片库？

Question

到目前为止，我所做的是：

<div class="gallery">
<?php

$postimg[]= "";
$postimg = DB::query('SELECT * FROM posts where user_id=:userid ORDER BY 
posted_at desc ' ,array(':userid'=>$userid));

foreach($postimg as $img)
{
echo "<a href=".$img['postimg']."><img  src='".$img['postimg']."' 
height='300' width='300'></a>";

  echo "<div class='gallery'>
  <img class='image' src='".$img['postimg']."'>
  <div class='overlay'>hover test</div>";
}
?>

图像已显示，但我对CSS有问题，似乎我不能做很多事情。

更具体地说，我尝试在每个图像上添加一个悬停效果，但是当我将鼠标悬停在一个图像上时，所有图像的悬停都显示在页面的底部。 此外，图像非常小。

这是我的CSS代码：

.gallery img {
    cursor: pointer;
    width: 25%;
    border-radius: 4px;
    transition: .3s;
    padding: 13px;
}


.gallery {
  position: relative;
  width: 100%;
  max-width: 300px;
}



.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.gallery:hover .overlay {
  opacity: 1;
}

因此，我的问题来了：我的数据库问题是否正确，所有悬停同时出现？ 这是完全的CSS错误吗？ （我有0 CSS知识）

这是问题的照片。

Answer 1

您的鼠标悬停一次发生是因为您的HTML无效。 您有一堆开放式<div>标签：

<!-- START GALLERY -->
<div class="gallery">

<?php
$postimg[]= "";
$postimg = DB::query('SELECT * FROM posts where user_id=:userid ORDER BY 
posted_at desc ' ,array(':userid'=>$userid));

foreach($postimg as $img) {
    echo "<a href=".$img['postimg']."><img  src='".$img['postimg']."' 
height='300' width='300'></a>";
    # START GALLERY AGAIN
    echo "<div class='gallery'>
    <img class='image' src='".$img['postimg']."'>
    <div class='overlay'>hover test</div>";
    # NO GALLERY END!!
}
?>
<!-- NO GALLERY END!! -->

首先，我可能会在其他页面上创建一个函数，并在页面加载时将其包含在页面顶部一次。 这样，您可以清理视图并使该视图可重用（创建此功能更多是建议而不是要求）。

/functions/getImagesById.php

<?php
function getImagesById($userid)
{
    $result = DB::query('SELECT * FROM posts where user_id=:userid ORDER BY 
posted_at desc ' ,array(':userid'=>$userid));
    return (!empty($result))? $result : [];
}

您的脚本应该更像：

<?php
# Include function
include_once("/functions/getImagesById.php");
# Loop through the returned array
foreach(getImagesById($userid) as $img): ?>

    <a href="<?php echo $img['postimg'] ?>"><img  src='<?php echo $img['postimg'] ?>' height='300' width='300' /></a>
    <!-- START THIS GALLERY -->
    <div class='gallery'>
        <img class='image' src='<?php echo $img['postimg'] ?>' />
        <div class='overlay'>hover test</div>";
    </div>
    <!-- END THIS GALLERY -->

<?php endforeach ?>