如何在 hover 上的圖像上放置文本和疊加層？

Question

我正在嘗試在行中的圖像上顯示顏色疊加層和文本。 到目前為止，這就是我所擁有的：

 #gallery-1 { padding-top: 60px; padding-bottom: 60px; background-color: #ffffff; } #gallery-1.gallery { margin-top: 45px; } #gallery-1.section-title h2 { text-align: center; color: #333333; text-transform: uppercase; } #gallery-1.container-fluid { padding-left: 0; padding-right: 0; } #gallery-1.gallery.gallery-item { position: relative; } #gallery-1.gallery.gallery-item-title h6 { opacity: 0; visibility: hidden; } #gallery-1.gallery.gallery-item-title h6:hover { position: absolute; opacity: 1; visibility: visible; top: 0; left: 0; color: red; z-index: 10000; } #gallery-1.gallery.gallery-item.overlay-shade { position: absolute; display: inline-block; vertical-align: middle; top: 0; left: 0; width: 100%; height: 100%; z-index: 12; background-color: #333; opacity: 0; } #gallery-1.gallery.gallery-item.overlay-shade:hover { opacity: 0.9; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="gallery-1"> <div class="container-fluid gallery"> <div class="row no-gutters"> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2016/11/14/03/05/surgery-1822458_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade"></div> <div class="gallery-item-title"> <h6>Item title 1</h6> </div> </div> </div> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/medical-consultation-470501_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade"></div> <div class="gallery-item-title"> <h6>Item title 2</h6> </div> </div> </div> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/hall-470497_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade"></div> <div class="gallery-item-title"> <h6>Item title 3</h6> </div> </div> </div> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2019/11/02/04/43/dentist-4595634_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade"></div> <div class="gallery-item-title"> <h6>Item title 4</h6> </div> </div> </div> </div> </div> <.-- End .container-fluid --> </section>

所以我設法顯示疊加層，但我無法顯示標題。 我想將它顯示在圖像的中心。 我希望疊加層與圖像的大小相同。 我試圖玩不透明度 0 和隱藏可見性，但顯然我搞砸了一些東西。

Answer 1

我做了什么？：

1 - 直接在DIV覆蓋上插入標題
2 - 我刪除了您的部分代碼（ #gallery-1.gallery.gallery-item.overlay-shade類）
3 - 添加一個新的 class 僅用於疊加效果（ .overlay-shade類）和疊加標題的淡入淡出（ gallery-item:hover.overlay-shade類）。

 #gallery-1 { padding-top: 60px; padding-bottom: 60px; background-color: #ffffff; } #gallery-1.gallery { margin-top: 45px; } #gallery-1.section-title h2 { text-align: center; color: #333333; text-transform: uppercase; } #gallery-1.container-fluid { padding-left: 0; padding-right: 0; } #gallery-1.gallery.gallery-item { position: relative; } #gallery-1.gallery.gallery-item-title { opacity: 0; visibility: hidden; } #gallery-1.gallery.gallery-item-title { position: absolute; opacity: 1; visibility: visible; top: 0; left: 0; color: red; z-index: 10000; } #gallery-1.gallery.gallery-item { opacity: 0.9; }.overlay-shade { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; height: 100%; }.gallery-item:hover.overlay-shade { opacity: 1; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="gallery-1"> <div class="container-fluid gallery"> <div class="row no-gutters"> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2016/11/14/03/05/surgery-1822458_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade">Item title 1</div> <div class="gallery-item-title"> </div> </div> </div> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/medical-consultation-470501_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade">Item title 2</div> <div class="gallery-item-title"> </div> </div> </div> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/hall-470497_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade">Item title 3</div> <div class="gallery-item-title"> </div> </div> </div> <div class="col-sm-3"> <div class="gallery-item"> <img src="https://cdn.pixabay.com/photo/2019/11/02/04/43/dentist-4595634_960_720.jpg" alt="" class="img-fluid"> <div class="overlay-shade">Item title 4</div> <div class="gallery-item-title"> </div> </div> </div> </div> </div> <.-- End .container-fluid --> </section>