A CodePen by sajad. hover effect

index.html

<div class="box">
  <p>متن توضیح</p>
</div>

script.js

$(function(){
  $('.box').mouseenter(function(){
    $(this).animate({
      "width" : "170px"
    });
    $('p').delay(1000).animate({
      "opacity" : "1"
    },200);
  }).mouseleave(function(){
    $('p').css("opacity" , "0");
    $(this).animate({
      "width" : "120px"
    });
  });
})

style.css

.box{
  width:120px;
  height:100px;
  background:red;
  transition:width 0.5s;
  float: left;
  position: relative;
}
p{
  font-family: tahoma;
  color:#fff;
  position: absolute;
  top:20px;
  right:0;
  opacity:0;
}