<div id="ex-trans">
  <div class="trans-cont">
    <p>touch me!</p>
  </div>
</div>
#ex-trans {
  padding: 10px;
  
  .trans-cont {
    width: 100px;
    height: 100px;
    background-color: #ff6347;
    transition-property: width, background-color;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    transition-delay: 0;
    
    p {
      padding: 40px 10px;
      color: #fff;
    }
    
    &:hover {
      width: 350px;
      background-color: #4169e1;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.