在图像上显示文本

Question

I am trying to display a text over an image when hovering. I was trying to follow this guide , but I didnt manage to convert that to my project. I could make an overlay, but that would have to be a fixed overlay, I would like to have it so it changes when the resolution changes. I wanted the overlay to be same size as thumbmail.

HTML:

  <div class="col-md-6 col-sm-2">
  {% for phone in phones %}
  <div class="llol col-md-8 col-md-2">
      <a href="{{ url_for('phones.phone', id=phone.id) }}" class="thumbnail">
        <img src="{{ url_for('static', filename='phone_pics/' + phone.image) }}" alt="" class="cus-img">
      {% if phone.stock == 0 %}
      <div class="overlayOUT">
          <div class="textOUT">OUT OF STOCK!</div>
      </div>

      </a>
      {% else %}
      </a>
      {% endif %}
      <p style="text-align: center;"><b>{{phone.brand.name}}</b> <span style="color: #006666;">{{phone.model}}</span><span class="badge">{{phone.stock}}</span></p>
  </div>
  {% endfor %}
</div> 

CSS:

    .thumbnail img{
    height:240px;
    width:100%; 
    }
    .overlayOUT{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 15px;
    height: 250px;
    width: 183px;
    opacity: 0.8;}

    .textOUT{
    color: white;
    padding: auto;
    font-size: 20px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #FA8072;  
    }

Answer 1

Just add display: none; prop in .textOUT

.textOUT{
    color: white;
    padding: auto;
    font-size: 20px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #FA8072;  
    display: none;
}

And add hover CSS , i hope it'll help you out. Thanks

.thumbnail:hover .textOUT{
    display: block;
}

Answer 2

The easiest way to do it is by simply creating a container for the text, setting its opacity to 0, and changing the opacity to 1 on the hover event. You're not using vanilla HTML, and I don't have access to your variables, so I made a sample that can be implemented the same way.

The .container class is setting the positioning of both the image and the hidden text container. Then, just set the .text-container class to be positioned on top of the image, and set a hover event on this class to change it from 0 opacity to 1.

 .container { box-sizing: border-box; position: relative; display: inline-block; overflow: hidden; width: 400px; height: 300px; } img { width: 100%; height: 100%; } .text-container { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); color: #fff; transition: all 0.4s ease-in-out 0s; } .text-container:hover { opacity: 1; } .text { text-align: center; position: relative; top: 50%; } 

 <div class="container"> <img src="https://www.romanticasheville.com/sites/default/files/images/basic_page/Asheville_Waterfalls.jpg"> <div class="text-container"> <div class="text">Beautiful Waterfall</div> </div> </div> 

You can read about many different ways to hover things in over images here .