как избежать элементов для изменения размера при зависании

Question

Я боролся с этим в течение нескольких часов, я переписал css всем, что я могу придумать, но все равно ничего.

В основном я сделал простую фотографию сетку с < улей>, в котором каждый < литий> держит образ, который должен быть 12,5% ширины родительского элемента таким образом я получаю - фотографий за строку. У изображений есть непрозрачность .2 и изменение на 1 при наведении курсора.

Это звучит очень просто, и когда я подумал об этом, я не думал, что трачу больше, чем на пару минут, но это было не так.

Проблема заключается в том, что элементы изменить их соотношение с 1px, когда завис так что я получаю 186 х 187, и так далее. Это приводит к положению 1px, и это действительно раздражает, потому что это также заставляет изображения немного встряхнуть.

Похоже, что это происходит чаще, когда ширина браузера меньше.

Прямо сейчас, это структура, что я испытывал (я знаю, что я не хочу пустой DIV .. Это имеет решение, что кто-то предложил.)

<section id="home" class="group"> 

<img class="intro" src="img/home.png"> 

<div id="bg"> 

<li> 
    <img class="bcg" src="img/0.jpg"> 
    <div class="cambia" style="background: url(img/01.jpg)"></div> 
</li> 

</ul> 
</div> 

< литий > является основным контейнером, то .bcg IMG представляет собой прозрачную кнопку, которую я поместил парить, так как я еще один элемент между фоном и кнопками, так что у меня 3 Z-индекс уровни

.intro{ 
width: 36%; 
border-radius: 99% 78% 34% 17%; 
position: absolute; 
display: block; 
margin: 1% 31%; 
z-index: 10;} 

#home ul{ 
width: 110%; 
position: relative; 
left: -3%; 
background: white; 
padding-bottom: 36%} 


#home li{ 
float: left; 
overflow: hidden; 
position: relative; 
width: 12%; 
padding-bottom: 12%;} 

.box{ 
left: 0px; 
top: 0px; 
overflow: hidden; 
position: absolute;} 

.cambia{ 
width: 100%; 
opacity: .25; 
position: absolute; 
z-index: 1; 
padding-bottom: 100%; 
background-size: cover!important; 
transition: .4s ease-in-out .09s;} 

.bcg{ 
position: absolute!important; 
opacity: .0!important; 
background: red; 
z-index: 30!important; 
width: 100%;} 

.bcg:hover ~ .cambia{ 
opacity: 1!important;} 

Answer 1

попробуйте добавить backface-visibility в li элементов.

-webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden;