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 { con…

Accepted Answer

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.

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

Solution

Problem