bootstrap responsive images with shadow+text overlays and another overlay when hover - css

Question

I would like to display images with some description on them, that will be overlayed when hover. I've got something like this:
<div class="container-fluid">
<div class="row">
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-3">
<div class="product-container">
<img src="images/img.png" class="product-img" alt="">
<p class="product-descr">Some description</p>
</div>
</div>
</div>
</div>
Now I need to add some classes (product-item, product-container, product-img, product-desc) to get it working. But I've tried many combinations and still have description below the image (even if the description overlay goes in the right place). And text makes the container going out of the bottom of image and the background of this container is visible.
At present my styles look like this:
.product-item {
position: relative;
}
.product-container {
background:red;
position: relative;
width:100%;
}
.product-img {
position: relative;
width: 100%;
#include hover-focus {
opacity: .5;
}
}
.product-overlay {
position: relative;
&:after {
position: absolute;
content: "";
background: #FFF;
top: -25px;
left: 0;
width: 100%;
height: 25px;
opacity: .7;
z-index:10;
}
}
Any help appreciated. Thank you.

Answer 1

You could position your overlay absolutely and move it out of the way with transform: translateY(). On hover you move it back in. Is this the effect you wanted to achieve?
Here is a CodePen to play with: https://codepen.io/Sixl/pen/bOdwaZ?editors=1100
.product-item {
position: relative;
}
.product-container {
background: #000;
position: relative;
width: 100%;
overflow: hidden;
}
.product-container .product-description {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
text-align: right;
padding: 0.2em 0.4em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}
.product-container:hover .product-description {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-img {
display: block;
max-width: 100%;
height: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-1">
<a href="#">
<figure class="product-container">
<img class="product-img" alt="" src="https://picsum.photos/800/450?image=20">
<figcaption class="product-description">Some description</figcaption>
</figure>
</a>
</div>
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-2">
<a href="#">
<figure class="product-container">
<img class="product-img" alt="" src="https://picsum.photos/800/450?image=21">
<figcaption class="product-description">Some description</figcaption>
</figure>
</a>
</div>
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-3">
<a href="#">
<figure class="product-container">
<img class="product-img" alt="" src="https://picsum.photos/800/450?image=22">
<figcaption class="product-description">Some description</figcaption>
</figure>
</a>
</div>
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-4">
<a href="#">
<figure class="product-container">
<img class="product-img" alt="" src="https://picsum.photos/800/450?image=23">
<figcaption class="product-description">Some description</figcaption>
</figure>
</a>
</div>
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-5">
<a href="#">
<figure class="product-container">
<img class="product-img" alt="" src="https://picsum.photos/800/450?image=24">
<figcaption class="product-description">Some description</figcaption>
</figure>
</a>
</div>
<div class="product-item col-md-4 col-sm-6 col-xs-12 p-6">
<a href="#">
<figure class="product-container">
<img class="product-img" alt="" src="https://picsum.photos/800/450?image=25">
<figcaption class="product-description">Some description</figcaption>
</figure>
</a>
</div>
</div>
</div>

Answer 2

Here something concerning the position of your description, but you should better describe what you want :
Bootply : https://www.bootply.com/blEmsHAYJ1
CSS:
.product-item {
position: relative;
}
.product-container {
background:red;
position: relative;
width:100%;
}
.product-overlay {
position: relative;
}
.product-overlay:after {
position: absolute;
content: "";
background: #FFF;
top: -25px;
left: 0;
width: 100%;
height: 25px;
opacity: .7;
z-index:10;
}
.product-img {
position: relative;
width: 100%;
}
.product-img:hover {
opacity: .5;
}
.product-descr{
position: absolute;
bottom: 0;
display: block;
width: 100%;
margin: 0;
text-align: center;
}