Issue with Chrome and Transform - html

Question

As you may see in the video (link bellow) I have an animaton that makes that an images moves with the mouse over.
It works fine with all browsers but I have a problem.
When I use and I click on "Información rápida" and then close the popup, the image disapears, and I can only see basic information of the property and a white space.
After closing he popup I should see the image again and the basic information when the mouse is over.
I'd like to know if it is a problem with my code or if there is an issue with Chrome and Transform.
This only occurs with Chrome browser.
The code is use for this in my css file is:
.ngm-thumb .mask {
background-color: #fff;
opacity: 1;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
transition: all 0.3s ease-in-out 0s;
I copy and paste my html code at the bottom.
Any idea?
I use Chrome v. 45.0.2454.101 m
If you think it is a coding error, any suggestion to fix this?
Link to the video: https://youtu.be/5Gp-0WpC_jQ
Site link: http://www.quieroapartamento.com/es/
Thanks for your help.
My complete CSS code in template.css for ngm-thumb class
.ngm-thumb {
border: 1px solid #ebebeb;
-webkit-box-shadow: 0 3px 3px #cccccc;
-moz-box-shadow: 0 3px 3px #cccccc;
box-shadow: 0 3px 3px #cccccc;
float: left;
height: 261px;
overflow: hidden;
position: relative;
width: 100%;
margin-bottom: 50px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.ngm-thumb .mask {
height: 261px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.ngm-thumb a > img {
border-bottom: 1px solid #ebebeb;
display: block;
position: relative;
width: 100%;
}
.ngm-thumb .main {
border-bottom: 1px solid #ebebeb;
height: 55px;
}
.ngm-thumb .main h5 {
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 10px 0 0 20px;
position: relative;
}
.ngm-thumb .main .price {
border-color: -moz-use-text-color #ebebeb #ebebeb;
border-style: none solid solid;
border-width: medium 1px 1px;
display: inline;
float: right;
font-size: 18px;
font-weight: bold;
height: 55px;
padding: 6px 25px;
background-color: rgba(90, 186, 198, 0.05);
color: #75c5cf;
}
.ngm-thumb .main .price span {
color: #979797;
display: block;
font-size: 11px;
font-weight: normal;
text-align: center;
}
.ngm-thumb .content {
padding: 20px;
position: relative;
text-align: left;
}
.ngm-thumb .content button {
margin-top: 5px;
}
.ngm-thumb .content p span {
display: block;
font-weight: bold;
}
.ngm-thumb .content i {
padding-right: 5px;
}
.ngm-thumb img {
transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb .mask {
background-color: #fff;
opacity: 1;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
transition: all 0.3s ease-in-out 0s;
}
.ngm-thumb:hover .mask {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.ngm-thumb:hover a > img {
-webkit-transform: translateY(-206px);
-moz-transform: translateY(-206px);
-o-transform: translateY(-206px);
-ms-transform: translateY(-206px);
transform: translateY(-206px);
}
#media (min-width: 992px) and (max-width: 1199px) {
.ngm-thumb {
font-size: 12px;
}
.ngm-thumb,
.ngm-thumb .mask {
width: 100%;
height: 261px;
}
.ngm-thumb .main .price {
padding: 10px;
font-size: 12px;
border-right: none;
}
.ngm-thumb .main,
.ngm-thumb .main .price {
height: 55px;
}
.ngm-thumb .mask {
background-color: #fff;
-webkit-transform: translateY(206px);
-moz-transform: translateY(206px);
-o-transform: translateY(206px);
-ms-transform: translateY(206px);
transform: translateY(206px);
This is my html code:
<patTemplate:tmpl name="pageoutput" unusedvars="strip">
{JOMRES_POPUPURL_GLOBALVAR}
<div title="{PROPERTY_NAME}" class="col-xs-12 col-sm-12 col-md-6 col-lg-4 appear" data-animated="flipInX" data-start="{ANIMATION_DELAY}">
<div class="ngm-thumb">
<img src="{IMAGEMEDIUM}" alt="{PROPERTY_NAME}" title="{PROPERTY_NAME}" class="img-responsive" />
<div class="mask">
<div class="main">
<h5>{PROPERTY_NAME} {STARSIMAGES} {SUPERIOR}</h5>
<div class="price">
{PRICE_PRICE} <span>{PRICE_POST_TEXT}</span>
</div>
</div>
<div class="content">
<p>{PROPERTY_STREET}, {PROPERTY_TOWN}, {PROPERTY_POSTCODE}, {PROPERTY_REGION}, {PROPERTY_COUNTRY}</p>
{QUICKINFORMATION}
{MOREINFORMATION}
</div>
</div>
</div>
</div>
<script>
jomresJquery(document).ready(function(){
jomresJquery('#module_{RANDOM_IDENTIFIER}_popup').appendTo("body");
});
</script>
<div class="modal fade" id="module_{RANDOM_IDENTIFIER}_popup"></div>
</patTemplate:tmpl>