Text transition on hover image - css

Question

I'am trying to set css transition on the text on hover image like this -> https://victorthemes.com/themes/glazov/portfolio-grid/
I tried to do this with cubic-bezier() function, but without result.
Here's my code.
* {
margin: 0;
padding: 0;
border: 0;
}
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">Teext.</p>
</div>
Please give me some hints how to do this.

Answer 1

To darken the image, you need to change the opacity of it. To zoom the image, use a scale transform and to move the caption text, you need a translateX transform. Apply those css styles and their respective transitions (you need a transition in the image as well as in the text) and you're left with the following:
* {
margin: 0;
padding: 0;
border: 0;
}
.img__wrap {
position: relative;
background: black;
height: 200px;
width: 257px;
overflow: hidden;
}
.img__img {
opacity: 1;
transition: all 0.2s;
}
.img__description {
position: absolute;
color: #fff;
transition: all .2s;
left: 15px;
right: 0;
bottom: 15px;
transform: translateX(-100%);
}
.img__wrap:hover .img__img {
opacity: 0.5;
transform: scale(1.2);
}
.img__wrap:hover .img__description {
transform: translateX(0);
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">Teext.</p>
</div>

Answer 2

I used transform: translate(); to move object. Play with cubic-bezier here to achieve perfect animation. But I used the same which was on the website you posted in example.
Also I removed opacity, visibility
* {
margin: 0;
padding: 0;
border: 0;
}
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
transform: translateX(-100%);
transition: all 600ms cubic-bezier(0.645, 0.045, 0.095, 1.08);
}
.img__wrap:hover .img__description {
transform: translate(0);
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">Teext.</p>
</div>

Answer 3

Ok, first, I would suggest using "all" for the transition element instead of defining the same values for all of the proprieties you want to transition.
transition: all .2s;
Second, let's get the bezier right. I think this is close enough:
cubic-bezier(1.000, 0.215, 0.355, 0.990)
So the transition propriety should look like this:
transition: all .2s cubic-bezier(1.000, 0.215, 0.355, 0.990);
For the text animation I suggest using animate.css and use fadeInLeft.