JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="col-sm-3" id="testDiv"></div>

CSS

.col-sm-3, .col-sm-12{
    transition: all 200ms; //replace 200ms with time of your choice
}
#testDiv{
    background:#000;
    height:50px;
}

JavaScript

$('#testDiv').mouseover(function(){
    $(this).removeClass('col-sm-3').addClass('col-sm-12');
}).mouseout(function(){
    $(this).removeClass('col-sm-12').addClass('col-sm-3');
});