how to avoid elements to resize when hovering

Question

I have been struggling with this for a few hours now, I have rewritten the css with everything that I can think of, but still nothing.

Basically I made a simple photo grid with a < ul > in which each < li > holds an image that is supposed to be 12.5% of the width of the parent element so I get 8 pictures per row. The pictures have an opacity of .2 and change to 1 when hovered.

It sounds super easy, and when I thought of it, I didn't consider spending more than a couple of minutes, but it was not the case.

The problem is that the elements change their ratio by 1px when hovered so I get 186 x 187, and so on. This causes a margin of 1px and it is really annoying because it also makes the images shake a bit.

It seems that it happens more when the width of the browser is smaller.

Right now, this is the structure that I was testing (I know, I didn't want the empty div.. It has a solution that someone else suggested.)

<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>

The < li > is the main container, the .bcg img is a transparent button that I placed to hover since I have one more element between the background and the buttons, so I have 3 z-index levels

.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;}

possible duplicate of [CSS transition effect makes image blurry / moves image 1px, in Chrome?](http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome) — easwee, Feb 10 '14 at 08:40
in the fiddle there is no problem [jsfiddle](http://jsfiddle.net/danvao/uz827/) but in my server... [url](http://ncuentra.me/bg/fondo.php) you can see the images move a bit if your resize the window and then hover — Dan, Feb 10 '14 at 16:30
you can also watch a screencast of the problem here http://youtu.be/BmWF4wr0Kbo — Dan, Feb 10 '14 at 17:04

score 0 · Accepted Answer · answered Feb 10 '14 at 17:19

0

try adding backface-visibility to the li elements.

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

answered Feb 10 '14 at 17:19

Jmh2013

2,625
2
26
42

Awesome!! That did the trick, I'm still not very sure about the logic, I thought this was only for 3d transforms... but thank you very much – Dan Feb 10 '14 at 19:30

how to avoid elements to resize when hovering

1 Answers1