Edit in JSFiddle

<div id="picture">
    <div class="pic_transform">
        <div class="text_display">
            <h>Hayat paylaştıkça güzel</h>
        </div>
    </div>
</div>

#picture {
    width: 200px;
    height: 200px;
    background: url('http://www.muratoner.net/images/test.jpg') no-repeat;
    background-size: 200px 200px;
    position: relative;    
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);    
}
.pic_transform {
   line-height:50px;
    transition-duration: 0.5s;            
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s;    
    -o-transition-duration: 0.5s;
    overflow: hidden;
    height: 0px;
}
#picture:hover .pic_transform {
    height: 50px;
}
.text_display {
    transform-origin: top;               
    transition-duration: 0.5s;               
    -webkit-transform-origin: top;       
    -webkit-transition-duration: 0.5s;   
    -moz-transform-origin: top;           
    -moz-transition-duration: 0.5s;       
    -o-transform-origin: top;    
    -o-transition-duration: 0.5s;
    font-size: 16px;
    font-family: Arial;       
    font-weight: normal;
    text-align:center;
    color: #FFF;       
}
#picture:hover .text_display {
    background: rgba(0, 0, 0, 0.5);   
    color: #fff;   
    height:50px;   
}