dbから取得したDIVSとIMAGESは正常ですが、テキストは表示されません

Question

私は完全に困惑しています。私はポートフォリオサイトを構築しています。それぞれのタイトルと説明のある画像をデータベースから取り出し、素敵なギャラリーに表示します。

私が達成しようとしている効果は、ホバリングされたときにテキストがイメージに現れるようにすることです。

データベースからデータを取得すると、画像は正常に表示されますが、テキストは表示されません。テキストを含むことを意図したdivは、私が望むもののイメージに現れますが、見られるテキストはありません。

CHROMEの検査ビューでも、テキストがdiv内に表示されます。

検査ビューから別のページにコピーして貼り付けたため、コンテンツがデータベースから取り出されず、テキストが正常に表示されます。

長い段落で申し訳ありませんが、説明が必要なので、私はすでに試したことを知っています。

ありがとうございます！

  <?php 

      $query = "SELECT * FROM `portfolio` ORDER BY `pf_id` DESC"; 
      $result = mysqli_query($con, $query); 

      $list = ''; 

      while ($row = mysqli_fetch_array($result)) 
      { 
       //Linking the variables 
       $id = $row["pf_id"]; 
       $title = $row["pf_title"]; 
       $desc = $row["pf_desc"]; 
       $pfimg = $row["pf_html"]; 

       $date = $row["pf_date"]; 
       $time = strtotime($date); 
       $datemdy = date("F j, Y", $time); 
       $datetime = date("g:i A", $time); 

       $list .= '<a href="pfpiece.php?id='.$id.'">' . $pfimg . '</a>'; 

      } 

     mysqli_close($con); 

     ?> 
     <div class="pf-container"> 
      <p><?php echo $list; ?></p> 
     </div> 

これは、データベースから引き出されたときにはうまく動作しないこのhtmlを生成します。

<div class="pf-img-wrap"> 
<img src="/uploads/portfolio_items/IMG/1.jpg"> 
<div class="pf-img-title">2</div> 
</div> 

このためCSS：

.pf-container 
{ 
    width:100%; 
    text-align: center; 
    background-color: #fff; 
    font-size:0; 
} 

.pf-img-wrap 
{ 
    width:calc(100%/3); 
    display: inline-block; 
    margin:0; 
    position:relative; 
} 

.pf-img-wrap img 
{ 
    position:relative; 
    width:100%; 
    height:40%; 
    object-position: 50% 50%; 
    -o-object-fit: cover; 
    object-fit: cover; 

    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
     -o-transition: all 1s ease; 
     -ms-transition: all 1s ease; 
      transition: all 1s ease; 
} 

.pf-img-wrap img:hover 
{ 
    -webkit-filter: brightness(65%); 
} 

.pf-img-title { 
    position: absolute; 
    z-index:60; 
    color: #fff; 
    background-color:red; 
    margin-top:10px; 
    width:90%; 
    height:90%; 
    top:0; 
    clear:both; 
} 

Answer 1

あなたのCSSルールでゼロにフォントサイズを設定します。

.pf-container { 
    width: 100%; 
    text-align: center; 
    background-color: #fff; 
    font-size: 0; 
} 

をので、（それらのdivのためのゼロ以外の何かに設定しますおそらくあなたが既に持っているルールで.pf-img-title）とそこに行く。