Displaying text over an image

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.