Styjun

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; 
 

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;

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.