Text over image CSS Chrome Error - html

Question

I tried this from this question: Text over image using CSS transitions.
It's working fine in both IE11 and Firefox Quantum and in both sites the animation/transition works perfectly but when I try to visualize it in Chrome the text that should appear beneath the image and eventually hover it goes to the bottom of the page. The console also shows me zero errors.
My question resumes in if it is a CSS absolute attribute problem or something else.
Here's my code:
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position: relative
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height: 50px;
bottom: -40px;
right: 0;
left: 0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align: center;
}
.block {
margin: 10px 10px 50px 10px;
float: left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
I'm using Bootstrap 3.3.5 and jQuery 2.1.4

Answer 1

I'm assuming that what you want is for the rollover text to be inside the image.
In this case I don't even know how it's working on IE11 or Firefox in your computer because here it fails on all browsers I have.
Your problem is basically that you are applying the CSS in the wrong element. Change .size to .pic in your CSS and it will get what you want.
Without position: relative inside .pic your position: absolute in .text is relative to the page itself (or the html element) and not the .pic element.
You also need overflow: hidden to hide any elements that go beyond the borders of the .pic element, thus hiding .text.

Answer 2

Added position relative & overflow as hidden to container div 'pic' and made height of div 'text' to zero. Its working fine in Chrome without any error and in IE too.
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position:relative
}
.pic {
position:relative;
overflow:hidden;
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height:0;
bottom: -40px;
right: 0;
left:0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align:center;
}
.block {
margin:10px 10px 50px 10px;
float:left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>

Answer 3

You can add properties for diferent browsers. First clear your cash and see if the problem is realy only i Chrome. Then you can create something like that :
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {-chrome-:only(;
property:value;
);}