reset transition when hover out

Question

I would like to have the move.down function to reset when i hover off the div. right now it doesnt resets, but just moves back up again. any help on this subject would be much appriciated.

See code:

CSS

#box_1{
   border-radius:12px;
   display: block;
   position: relative !important;
   width: 204px;
   height: 203px;
   background:url(http://biready.visseninfinland.nl/wp-content/uploads/2014/01/input1.png);
   background-size:204px 203px;
   background-repeat:no-repeat;
}

#box_1 .hoverImg {
   position: absolute;
   left: 0; 
   top: 0;
   width: 204px;
   height: 203px;
   display: none;
}

#box_1:hover .hoverImg {
   display: block;
   width: 204px;
   height: 203px;
}

#axis1:hover .move-down {
   transform: translate(0,100px);
   -webkit-transform: translate(0,100px);
   -o-transform: translate(0,100px);
   -moz-transform: translate(0,100px);
}

.object1 {
   position: absolute;
   transition: all 5s ease-in;
   -webkit-transition: all 5s ease-in-out; /** Chrome & Safari **/
   -moz-transition: all 5s ease-in-out; /** Firefox **/
   -o-transition: all 5s ease-in-out; /** Opera **/
}

.object1 {
   position: absolute !important;
}
.line1 {
   top: 8%;
   left: 5%;
   width: 180px;
   height: 15px;
}

#box_1:hover .move-down {
   transform: translate(0,150px);
   -webkit-transform: translate(0,150px);
   -o-transform: translate(0,150px);
   -moz-transform: translate(0,150px);

}

HTML

<div id="box_1">
<div id="axis1"><img class="object1 line1 move-down" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/balkje1.gif"/></div>
<div class="hoverImg"><img src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/input2-80.png" width="204" height="203" alt=""></div>
</div>

See fiddle: http://jsfiddle.net/38m6u/

Looking forward to a response.

Answer 1

The transition should take place when hovering over #box_1 instead:

Remove the transition from .object1 and add it to the selector #box_1:hover .move-down

UPDATED EXAMPLE HERE

#box_1:hover .move-down {
    transform: translate(0, 150px);
    -webkit-transform: translate(0, 150px);
    -o-transform: translate(0, 150px);
    -moz-transform: translate(0, 150px);
    transition: all 5s ease-in;
    -webkit-transition: all 5s ease-in-out;
    -moz-transition: all 5s ease-in-out;
    -o-transition: all 5s ease-in-out;
}