Edit in JSFiddle

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

#wrap {
    border: 2px solid; 
    height: 150px;
    width: 300px;
    position: relative;
}

#box {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0.3;
    position: absolute;
    -webkit-transition: left 1s, opacity 1s;
       -moz-transition: left 1s, opacity 1s;
         -o-transition: left 1s, opacity 1s;
            transition: left 1s, opacity 1s;
}

#wrap:hover #box {
    opacity: 1;
    left: 200px;
    height: 150px;
}

<p>hover for transition</p>

<div id="wrap">
    <div id="box" class="active"></div>
</div>