CODEWITHSUNDEEP
htmlcss
Honest Phiri
Honest Phiri

Reputation: 1

How can I make Hover overlay text fixed to an Image

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>

Upvotes: 0

Views: 501

Answers (3)

pschulzk
pschulzk

Reputation: 11

If I get you right, you want div.overlay1 to

  1. be invisible initially
  2. be visible on hover over div.container1
  3. 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>

Upvotes: 1

rocky
rocky

Reputation: 45

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

Upvotes: 0

Kevin
Kevin

Reputation: 1377

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>

Upvotes: 0

Related Questions