CSS change height on :hover - html

Question

I am trying to change the height and position of an anchor <a> on hover.
The CSS I am using is:
.options {
background: linear-gradient(#FFFFFF, #dbe2e8);
display: table-cell;
vertical-align: middle;
text-align: center;
width: 115px;
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
}
.options:hover {
height: 39px;
top: -4px;
}
I must be doing something wrong. I have tried the :hover part with just the top: -4px; and this works, however the height: 39px; does nothing.
Thanks

Answer 1

Add position: relative also because top, right, bottom and left properties work only when applied with position relative, absolute or fixed.
.options {
background: linear-gradient(#FFFFFF, #dbe2e8);
display: table-cell;
vertical-align: middle;
text-align: center;
width: 115px;
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
position: relative;
}
.options:hover {
height: 39px;
top: -4px;
}
Link

Answer 2

While Muhammad Usman's answer works just fine, I'd like to offer an alternative.
If you replace the top:-4px with translateY(-4px) that will work regardless of the "position" property of the element and/or the "top" property.
(Useful if for example the "top" property is a percentage or set dynamically by JS and you want to move it by 4 pixels no matter what the top is)
.options {
background: linear-gradient(#FFFFFF, #dbe2e8);
display: table-cell;
vertical-align: middle;
text-align: center;
width: 115px;
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
}
.options:hover {
height: 39px;
transform:translateY( -4px);
}