How can I make Hover overlay text fixed to an Image - html

Question

This is the portion of my HTML: I want to have to the text fixed to an image and not disappear when I stop hovering on the text.
.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

If I get you right, you want div.overlay1 to
be invisible initially
be visible on hover over div.container1
stay visible even if you hover out of div.container1
You cannot achieve 3. without using JavaScript.
I suggest this code:
/* 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

See the solution if it works!
Just one question:
If you need a text to be fixed to an image, then why are you using hover?
.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

remove class from gallery div
<div class="overlay1">Gallery</div> remove the class and use without any "overlay1"class