Тот же CSS, другой результат (Bootstrap4, только Chrome)

Question

У меня есть изображения на моем веб-сайте с надписями в середине, которые отображаются при наведении курсора.Тот же HTML с тем же CSS применяется к каждому.Он отлично работает в большинстве браузеров, за исключением Chrome, где только первый столбец изображений работает нормально, а остальные не работают.

Ссылка на мой сайт

Firefox и Edgeработает отлично, даже IE в порядке

Answer 1

You can try this code,

<div class="img-caption">
 <div>
  <b>W filament</b>
  <p>3.08.1.100.m.o</p>
 </div>
</div> 

<style>
.img-caption {
    position: absolute;
    color: white;
    font-size: 15px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}
</style>

Answer 2

Попробуйте это

.img-caption {

position: relative;
color: white;
font-size: 15px;
font-weight: 400;
vertical-align: middle;
text-align: center;
margin: 10px auto;
top: 2em;
left: 0;
transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%) -moz-transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
display: inline;

}

Answer 3

Вам необходимо изменить свойство transform в img-caption на translate3d(-50%, 100%, 0).

РЕДАКТИРОВАТЬ:

В связи с проблемой наведения на контейнере, которая связана с column-countимущество.Изменение класса .gal3 на использование свойств flex вместо этого устраняет проблему.

.gal3 {
  display: flex;
  flex-flow: row wrap;
}

.gal3 .gal-container {
  width: 33%;
}

Если вы также хотите центрировать свои изображения, вы можете использовать тот же класс align-middle, который вы уже используете.