Adding content via: hover: before the base element disappears from the mouse
I am trying to create a card tile with a background image (sprites). On hover, I would like to change the background image with color and add text. I am trying to place this text (which can be 1, 2 or even 3 lines) in the very center of the tile. To do this, I set the base element to display: table and :before
on display: table-cell
(but only on hover).
The problem I'm running into is that after someone has run the base element and sat down, the base element disappears in Chrome and Opera on Mac! (Works great in FF and Safari. Not indexed in IE or any of those browsers on Windows / Linux). Here's my code and fiddle:
Violin: 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 behavior
source to share
When checked in chrome mac, adding a table-to-table item dynamically breaks the layout.
One thing we can do is add a default element 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 works in Chrome MAC.
source to share