html Grow Hover

Question

I want to get each box to grow larger when the mouse is on it. So far I have come up with this and it doesn't work. This is my html code

        <div class="whole"> 
            <div class="type">
                <p>Assets</p>
            </div>
            <div class="plan">
                <div class="content">
                    <ul>
                        <li><a href="" id="grow" onClick=window.open("Vehicles.php","Ratting","width=800,height=400,left=150,top=200,toolbar=0,status=0,scrollbars=yes,");>Vehicles</a></li>
                        <ol><a href="">Materials</a></ol>
                    </ul>
                </div>
            </div>
        </div>

and this is my css code. i have included only the ones i thought that would be relevant to the question.

ul{
    list-style: none;
    font-size: 15px;
    font-family:'Open Sans';
    color: #9095aa;
    padding: 0px;
    margin: 0px;
}
li{
    border-bottom: 1px solid #494a5a;
    padding: 0px;
    margin: 0px;
    text-align: center;
    height: 52px;
    line-height: 52px;
}
ol{
    /*border-bottom: 1px solid #494a5a;*/
    padding: 0px;
    margin: 0px;
    text-align: center;
    height: 52px;
    line-height: 52px;
}

a{
    font-size: 18px;
    font-family:'Open Sans';
    color: white;
    text-decoration: none;
}
p{
    font-family:'Open Sans';
    font-weight: 590;
    font-size: 2.5vw;
    color: black;
    text-align: center;
    padding-top: 10px;
}
#grow{}
a.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

and this is how it looks like

Answer 1

You must add grow class to your <li> because it will not work on your anchor tag and just simply use this selector .grow:hover.

ul {
  list-style: none;
  font-size: 15px;
  font-family: 'Open Sans';
  color: #9095aa;
  padding: 0px;
  margin: 0px;
}

li {
  border-bottom: 1px solid #494a5a;
  padding: 0px;
  margin: 0px;
  text-align: center;
  height: 52px;
  line-height: 52px;
}

ol {
  /*border-bottom: 1px solid #494a5a;*/
  padding: 0px;
  margin: 0px;
  text-align: center;
  height: 52px;
  line-height: 52px;
}

a {
  font-size: 18px;
  font-family: 'Open Sans';
  /*color: white;*/
  text-decoration: none;
}

p {
  font-family: 'Open Sans';
  font-weight: 590;
  font-size: 2.5vw;
  color: black;
  text-align: center;
  padding-top: 10px;
}

.grow:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

<div class="whole">
  <div class="type">
    <p>Assets</p>
  </div>
  <div class="plan">
    <div class="content">
      <ul>
        <li class="grow"><a href="" onClick=window.open( "Vehicles.php", "Ratting", "width=800,height=400,left=150,top=200,toolbar=0,status=0,scrollbars=yes,");>Vehicles</a></li>
        <ol class="grow"><a href="">Materials</a></ol>
      </ul>
    </div>
  </div>
</div>