如何将悬停叠加文字固定在图片上

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上方时可见
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

从Gallery div中删除课程 <div class="overlay1">Gallery</div>删除该类并在没有任何“ overlay1”类的情况下使用