Struggling to implement a hovering text over an image? I attempted to follow a tutorial, but couldn't adapt it to my project. While I managed to create a fixed overlay, I aim for a responsive solution that adjusts with resolution changes. My goal is to have the overlay match the thumbnail size.
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;
}