Блог

пожалуйста, взгляните на ссылку ниже (хотя сделайте окно результатов немного шире) и скажите мне, почему все еще остаются белые линии сверху и по бокам полей, когда наложение при наведении полностью загружено? Когда я помещаю фоновое изображение для этого divs, проблема по-прежнему возникает (неважно, SVG это файл или PNG).

 .link-picture-small {
position: relative;
display: block;
margin: auto;
width: 100%;
height: 17.5em;
background: #FFFFFF;§
background-size: 100%;
border-radius: 0.625em;
}

.overlay {
position: absolute;
display: table;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
width: 100%;
height: 100%;
background: #212121;
border-radius: 0.625em;
opacity: 0;
-webkit-transition: all 1.15s ease-out;
   -moz-transition: all 1.15s ease-out;
   -moz-transition: all 1.15s ease-out;
        transition: all 1.15s ease-out; 
}

.overlay p {
display: table-cell;
vertical-align: middle;
}

.link-picture-small:hover .overlay {
opacity: 0.99;
}
  

http://jsfiddle.net/hatK5/

У меня возникла эта проблема с использованием Chrome (последняя версия). Эта проблема отсутствует в Firefox и (что очень удивительно!) в Safari.

Существуют ли какие-либо хитрые методы, как заставить его работать должным образом в браузере Google?

Я думаю, это из-за display:table .

Я предложу подход, но я не уверен, что это лучший.

Удалить

display: table;

Добавить

 padding-top: 50%;
box-sizing: border-box;
webkit-box-sizing: border-box;
  

Скрипка

Поскольку вы позиционируете .overlay абсолютно, вам не нужно устанавливать для него display значение table .

Вот пример:http://jsfiddle.net/hatK5/3 /.

 .overlay {
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    background: #212121;
    border-radius: 0.625em;
    opacity: 0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}