How to overaly with an height transform css3 - css

Question

I'm trying to create a group of boxes where in the beginning has few info, and when hovering displays more info.
I achieved it but I have a problem related with the position of the other boxes. Every time I hover over one box, the others change their position because I'm applying a height and a width in hover. It work fine if I comment height and width in hover but I need to maintain de box-shadow at all time
Here you can check the test: https://jsfiddle.net/p4av5ejv/
HTML:
<div class="partnerLlistat">
<div id="partnerBox" class="partnerBox">
<div id="partnerData">
<h3>Field1: Test test</h3>
<h4>Field2: test</h4>
<p id="type">Field3: test</p>
<p id="address">Field4: test</p>
<p id="phone">Field5: 111</p>
<p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p>
<p id="mail">Field7: test#gmail.com</p>
<p id="offer">Field8: test test</p>
</div>
</div>
<div id="partnerBox" class="partnerBox">
<div id="partnerData">
<h3>Field1: Test test</h3>
<h4>Field2: test</h4>
<p id="type">Field3: test</p>
<p id="address">Field4: test</p>
<p id="phone">Field5: 111</p>
<p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p>
<p id="mail">Field7: test#gmail.com</p>
<p id="offer">Field8: test test</p>
</div>
</div>
<div id="partnerBox" class="partnerBox">
<div id="partnerData">
<h3>Field1: Test test</h3>
<h4>Field2: test</h4>
<p id="type">Field3: test</p>
<p id="address">Field4: test</p>
<p id="phone">Field5: 111</p>
<p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p>
<p id="mail">Field7: test#gmail.com</p>
<p id="offer">Field8: test test</p>
</div>
</div>
<div id="partnerBox" class="partnerBox">
<div id="partnerData">
<h3>Field1: Test test</h3>
<h4>Field2: test</h4>
<p id="type">Field3: test</p>
<p id="address">Field4: test</p>
<p id="phone">Field5: 111</p>
<p id="web">Field6: <a ref="external" target="_blank" href="http://test.net">http://test.net</a></p>
<p id="mail">Field7: test#gmail.com</p>
<p id="offer">Field8: test test</p>
</div>
</div>
</div>
CSS:
I cannot define CSS code because I don't know how to format well to be valid. Check in jsFiddle link.
Can anybody help me with this?, I googled a lot and stackoverflowing a lot but nothing exactly what I need.
Thank you for your time!

Answer 1

OK. I found the solution.
HTML
<li id="partnerBox" class="partnerBox">
<h3>Nom: aaa</h3>
<h4 class="VisibleOnHover">Entitat: aaa</h4>
<p>Tipus de servei: aaa</p>
<div class="VisibleOnHover">
<p>Adreça: aaa</p>
<p>Telèfon: 111</p>
<p>Pàgina web: <a ref="external" target="_blank" href="http://aaa.net">http://aaa.net</a></p>
<p>Correu electrònic: aaa#gmail.com</p>
<p>Avantatge que ofereix: aaa aaa</p>
</div>
</li>
<li id="partnerBox" class="partnerBox">
<h3>Nom: bbb bbb</h3>
<h4 class="VisibleOnHover">Entitat: bbb</h4>
<p>Tipus de servei: bbb</p>
<div class="VisibleOnHover">
<p>Adreça: bbb</p>
<p>Telèfon: 111</p>
<p>Pàgina web: <a ref="external" target="_blank" href="http://bbb.net">http://bbb.net</a></p>
<p>Correu electrònic: bbb#gmail.com</p>
<p>Avantatge que ofereix: bbb bbb</p>
</div>
</li>
<li id="partnerBox" class="partnerBox">
<h3>Nom: ccc ccc</h3>
<h4 class="VisibleOnHover">Entitat: ccc</h4>
<p>Tipus de servei: ccc</p>
<div class="VisibleOnHover">
<p>Adreça: ccc</p>
<p>Telèfon: 111</p>
<p>Pàgina web: <a ref="external" target="_blank" href="http://ccc.net">http://ccc.net</a></p>
<p>Correu electrònic: ccc#gmail.com</p>
<p>Avantatge que ofereix: ccc ccc</p>
</div>
</li>
<li id="partnerBox" class="partnerBox">
<h3>Nom: ddd ddd</h3>
<h4 class="VisibleOnHover">Entitat: ddd</h4>
<p>Tipus de servei: ddd</p>
<div class="VisibleOnHover">
<p>Adreça: ddd</p>
<p>Telèfon: 111</p>
<p>Pàgina web: <a ref="external" target="_blank" href="http://ddd.net">http://ddd.net</a></p>
<p>Correu electrònic: ddd#gmail.com</p>
<p>Avantatge que ofereix: ddd ddd</p>
</div>
</li>
</ul>
Again, I don't know how to insert formatted CSS here, so check jsfiddle link to see this code.
Check this to see how to solve that. In jsfiddle you cannot appreciate well, because you have to tune the padding and margin in the .partnerLlistat > li[id^="partnerBox"]:hover rule to your site.