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

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