If you want to change width and height to the box and show the content after a transition on hover, below code will help you.

We can easily use the transition property and change the width and height to the div, for this first we will create the content div and inside create the two div, the first div is for a title and the second div is for description. The transition property defines your timing function, first we will fix the height and width in content div and then on hover width and height will change.

below code shows that when we take mouse on the div, the width and height will not immediately change it will change smoothly and the second div wait for 1 second before the transition effect starts.

HTML:

<div class="content">//content div
    <div class="one">//first div
     <h1>Who I am</h1>
    </div>
    <div class="two">//second div 
        <p>I'm human being, I want some one two love me, i want some one to need me </p>
    </div>
  </div>

CSS:

* {
      color: #fff;  //change background color content div 
    }
    .content{
      width: 150px;
      height: 200px;
      position: relative;
      opacity: 0.8; //describes the transparency-level a div
      margin: auto;
       -webkit-transition: width 1s, height 1s; //change the width and height with a smooth transition        effect off hover: used for chrome 
      transition: width 1s, height 1s; //used for firefox 
    }
    .content:hover{
      width: 200px;
      height: 300px;
      -webkit-transition: width 1s, height 1s; //change the width and height with a smooth transition effect on hover : used for chrome 
      transition: width 1s, height 1s;  //used for firefox 
    }
    .content:hover .two{
      opacity: 1;
      transition-delay: 1s; //Wait 1 seconds before the transition effect starts:
    }
    .content .one,.content .two{
      position: absolute;
      background: #000;
      width: 100%;
      height: 100%;
      display: table;
    }
    .content .two{
      transition: opacity 1s ease-in-out; //Specifies a transition effect with a slow start and end 
      opacity: 0;
    }
  .content .one h1,
  .content .two p{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

I have attached the full code packet at the bottom: