div Hover Issue when reaches border - html

Question

I want hover effect on div, I have applied bottom style when hover on div and everything is working but when hover border/edge of the div means the div jerking/jumping continuously.
my code :
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
}
.traning-box:hover {
bottom: 15px;
position: relative;
}
<div class="traning-box">
<p> Test box</p>
</div>

Answer 1

Try to use :after pseudo-element. When the .traning-box goes up, the :after goes down, so the cursor will still over the .traning-box (because it is a parent block for the :after).
.traning-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
padding-top: 70px;
padding-bottom: 30px;
position: relative;
text-align: center;
width: 120px;
}
.traning-box:after {
bottom: 0;
display: block;
content: '';
height: 15px;
left: 0;
position: absolute;
width: 100%;
}
.traning-box:hover {
margin-top: -15px;
}
.traning-box:hover:after {
bottom: -15px;
}
<div class="traning-box">
<p>Test box</p>
</div>

Answer 2

You could use animation to achieve it.
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
margin:20px;
position:relative;
}
.traning-box:hover {
animation-name:move;
animation-duration:1s;
animation-iteration-count:1;
animation-timing-function: ease;
position: relative;
border:1px solid red;
}
#keyframes move{
50%{
transform:translateY(-15px);
}
}
<div class="traning-box">
<p> Test box</p>
</div>

Answer 3

You need to use transition and translate together to achieve smooth hover effect.
.traning-box {
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
transition: all 0.5s linear;
}
.traning-box:hover {
transform: translateY(-15px);
position: relative;
}
<div class="traning-box">
<p> Test box</p>
</div>

Answer 4

Try below. You have to use inner div to write a hover effect.
.traning-box{
background: #fff;
padding-top: 70px;
padding-bottom: 30px;
box-shadow: 0 0 35px 5px rgba(0, 0, 0, .07);
border-radius: 5px;
width: 120px;
text-align: center;
}
.traning-box1 {width:120px;}
.traning-box1:hover .traning-box{
bottom: 15px;
position: relative;
}
<br/>
<br/>
<div class="traning-box1">
<div class="traning-box">
<p> Test box</p>
</div>
</div>