Hover on DIV (increase height - top and bottom) without affecting other DIVs - html

Question

I have this issue of hovering a div element. I want to increase the height of a div from top and bottom on hover, however, it moves the other divs. Here is the pen. Thanks for the help!
Sample code only
<div class="container text-center key-industries">
<h2 class="margin-bottom-sm"><span class="text-gradient">9 Key</span> Industries</h2>
<div class="row">
<div class="col-lg-4 col-md-12 text-center grey-box">
<h3>LOREM IPSUM</h3>
<span class="number-shadow">01</span>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Search Engine Optimization (SEO)</li>
<li>PPC Advertising </li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center grey-box">
<h3>LOREM IPSUM</h3>
<span class="number-shadow">02</span>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Search Engine Optimization (SEO)</li>
<li>PPC Advertising </li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center grey-box">
<h3>LOREM IPSUM</h3>
<span class="number-shadow">03</span>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Search Engine Optimization (SEO)</li>
<li>PPC Advertising </li>
</ul>
</div>
</div>
</div>

Answer 1

with css when you hover over an element with class "grey-box" and changing the style of this class on hover keep in mind that all other boxes have the same class name "grey-box" then height of all boxes will be effected .. because all boxes have class "grey-box" , there are two solutions either give every box one different class like b1,b2,b3,b4 or other solution is to use javascript and loop through all elements and use onmouseover event . you can watch this as well for better visual understanding of code
codemyui