Adding content via :hover:before causes base element to disappear on mouse out

Question

I'm trying to create a card tile with a background image (sprites). On hover, I would like to swap the background image with a color and add some text. I'm trying to position this text (which can be 1, 2 or even 3 lines) in the very center of the tile. To do this, I'm setting the base element to display: table and the :before element to display: table-cell (but only on hover).

The problem that I'm facing is, after one has hovered the base element and moused out, the base element disappears in Chrome and Opera on a Mac! (Works fine in FF and Safari. Untested in IE or any of these browsers on Windows/Linux). Here's my code and a fiddle:

Fiddle: http://jsfiddle.net/stacigh/0vf47vy5/

.picture {
    outline: 1px solid black;
    float: left;
    margin: 0 10px 10px 0;
    width: 150px !important;
    height: 150px !important;
    background: maroon  url('http://www.placehold.it/150x150');
    cursor: pointer;
    display: table;
}  
.picture:hover {
    background-image: none;
    color: white;
}
.picture:hover:before {
    content: 'Test';
    text-transform: uppercase;
    text-align: center;
        
    display: table-cell;
    vertical-align: middle; 
}

<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>
<div class="picture"></div>

Edit: Here's a gif with the behavior

Answer 1

When checked in Chrome mac, adding a table-cell element dynamically causes the layout to break.

One thing that we can do is, we can add the element by default and update its content on hover.

http://jsfiddle.net/0vf47vy5/5/

.picture:before {
  content: '';
  text-transform: uppercase;
  text-align: center;
  display: table-cell;
  vertical-align: middle; 
}

.picture:hover:before {
  content: 'Test';
}

This is working finr in Chrome MAC.