如何將懸停疊加文字固定在圖片上

Question

這是我的HTML的一部分：我想將文本固定在圖片上，並且當我停止在文本上停下來時不要消失。

 .overlay1 { position: relative; 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; } /*Test hover*/ .container1:hover .overlay1 { opacity: 0.5; } 

  <div class="container1"> <a href="/content/gallery"> <div class="columny"> <div class="row1"> <img src="sites/chau.ac.zm/themes/chau/images/AF.jpg" alt="Snow" class="image" style="width:100%"> <!-- <div class="overlay1"> --> <div class="overlay1">Gallery</div> <!-- </div> --> </div> </div> </a> </div> 

Answer 1

如果我說對了，您希望div.overlay1

1. 最初不可見
2. 在div.container1上方懸停時div.container1
3. 即使您將鼠標懸停在div.container1仍然保持可見

如果不使用JavaScript，則無法實現3.。 我建議這段代碼：

 /* You need this container to limit the .overlay1 position */ .img-container { position: relative; } .overlay1 { 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; } /*Test hover - change :hover to class .visible */ .container1.visible .overlay1 { opacity: 0.5; } 

 <div id="container1" class="container1"> <a href="/content/gallery"> <div class="columny"> <div class="row1"> <div class="img-container"> <img src="https://images.unsplash.com/photo-1462899006636-339e08d1844e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&h=150&q=80" alt="Snow" class="image" style="width:100%"> <!-- <div class="overlay1"> --> <div class="overlay1">Gallery</div> <!-- </div> --> </div> </div> </div> </a> </div> <script> // get element var container1 = document.getElementById("container1"); // add hover event function container1.addEventListener("mouseover", function() { container1.className = "container1 visible"; }); </script> 

Answer 2

如果可行，請參閱解決方案！

只是一個問題：如果需要將文本固定在圖像上，那么為什么要使用懸停？

 .overlay1 { position: absolute; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; width: auto; transition: .5s ease; opacity:1; color: white; font-size: 20px; padding: 20px; text-align: center; right:-20px; top:50%; } .row1{ position:relative; width:500px; margin:0 auto; } 

 <div class="container1"> <a href="/content/gallery"> <div class="columny"> <div class="row1"> <img src="https://image.shutterstock.com/image-photo/field-spring-flowers-sunlight-450w-377208970.jpg" alt="" /> <!-- <div class="overlay1"> --> <div class="overlay1">Gallery</div> <!-- </div> --> </div> </div> </a> </div> 

Answer 3

從圖庫div中刪除類<div class="overlay1">Gallery</div>刪除該類並在沒有任何“ overlay1”類的情況下使用