Hover effect in a grid

Question

For some reason when hovering over a box, it increases in size a little bit. It's supposed to only zoom in within the box, not increase the size of it.

JSFiddle

 #wrapper { overflow: hidden; width: 100%; max-width: 900px; margin: 0 auto; border: 1px solid #c5c5c5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #eee; } #outer { width: 20%; padding-bottom: 20%; color: #FFF; position: relative; float: left; overflow: hidden; display: inline-block; } #inner { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #66F; padding: 10px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } #inner:hover { transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari and Chrome */ -o-transform: scale(1.1); /* Opera */ vertical-align: middle; } 

 <div id="wrapper"> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> </div> 

Answer 1

The problem you are seeing is because of your positioning attributes on the #inner which is leaving a 1px gap on either side. The parent is effectively 1px larger than the inner box on all sides and so you see a small increase when you hover. Only after this 1px is covered, the overflow: hidden comes into effect.

I have added a background: red to the parent ( #outer ) so that you can see how the parent is larger than the child.

 #wrapper { overflow: hidden; width: 100%; max-width: 900px; margin: 0 auto; border: 1px solid #c5c5c5; box-sizing: border-box; background: #eee; } #outer { width: 20%; padding-bottom: 20%; color: #FFF; position: relative; float: left; overflow: hidden; display: inline-block; background: red; } #inner { position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; background: #66F; padding: 10px; transition: all .3s ease; } #inner:hover { transform: scale(1.1); vertical-align: middle; } 

 <div id="wrapper"> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> </div> 

---

Instead of using positioning attributes to leave that 1px gap on all sides, you could use a transparent border on the parent. This will leave a 1px gap on all side like your original snippet but since there is no space left between the parent's border and child, the zoom would not look like the child is growing outside the parent.

 #wrapper { overflow: hidden; width: 100%; max-width: 900px; margin: 0 auto; border: 1px solid #c5c5c5; box-sizing: border-box; background: #eee; } #outer { width: 20%; padding-bottom: 20%; color: #FFF; position: relative; float: left; overflow: hidden; display: inline-block; border: 1px solid transparent; } #inner { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #66F; padding: 10px; transition: all .3s ease; } #inner:hover { transform: scale(1.1); vertical-align: middle; } 

 <div id="wrapper"> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> <div id="outer"> <div id="inner"> test </div> </div> </div> 

Couple of other points to note:

• I didn't give this much importance as I thought of it to be a copy-paste demo but same id should not be used for multiple elements. If we do, the HTML becomes invalid (as putvande has pointed in his comment).
• As torazaburo has pointed out in his comment, the box-sizing and transition properties don't require prefixed versions anymore (unless you have to support very very old browser versions).