Edit in JSFiddle

<div class="transitions">
    <p>Transitions</p>
</div>
.transitions {
    width:200px;
    height:100px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
    -webkit-transition: width 1s, height 5s;
    -moz-transition: width 1s, height 5s;
    -ms-transition: width 1s, height 5s;
    -o-transition: width 1s, height 5s;
    transition: width 1s, height 5s;
}
.transitions:hover {
    width: 300px;
    height: 200px;
}
p {
    text-align:center;
    margin:40px auto;
}