Как сделать текст наложения Hover закрепленным на изображении?

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

Вы не сможете достичь 3. без использования JavaScript.Я предлагаю этот код:

/* 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

удалить класс из галереи div <div class="overlay1">Gallery</div> удалить класс и использовать без какого-либо класса "overlay1"

Answer 3

См. Решение, если оно работает!

Только один вопрос: если вам нужно закрепить текст на изображении, то почему вы используете наведение?

.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>