CSS transition effect upward height doesnt work - html

Question

EDITED JSFIDDLE
The goal to display a transition upward height when the button is hovered, but this line of CSS .btn-position:hover ~ .bg-transit { height: 430px !important;} seems it expands downwards instead upward. Is there a way to transition UPWARD?
I dont want to add any JS to it.
HTML
<div class="career-wrapper-positions">
<div class="section-positions">
<div class="position-wrap">
<div class="position-box" id="video_interpreter">
<div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
<div class="position-tited-top-bg"></div>
<div class="position-box-info">
<div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
<div class="position-subheader" id="subheader1">positions</div>
<div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
<div class="btn-position">
<button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
<div class="bg-transit"></div>
</div>
</div>
</div>
</div>
CSS
.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex; margin-top: 175px; }
.position-box { width: 209px !important; height: 330px; display: block; margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important; height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2; }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px; }
.position-box-info { padding-top: 10px; }
/* this is the button to trigger a new height size transition of the background box */
.bg-transit { width: 209px !important; height: 338px; display: block; background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height; transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}
.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}

Answer 1

.position-btn:hover ~ .position-box-info selects all siblings .position-box-info that come after a .position-btn:hover. Since .position-box-info is actually the parent of the .position-btn element, nothing gets selected. In fact, you can't select a parent from a child, so you either have to add a class with javascript or change your HTML.
Also, you seem to miss a </div> closing tag.