.principal {
    position: relative;
    width:100%;
    height: 247px;
    overflow: hidden;
    
}
.foto           {
    position: absolute;
    top:0; left:0; 
    z-index:1;
    width: 100%; height: 280px;
    clip: rect(37px 377px 247px 0);
}

.legenda        {
    position: absolute;
    top:153px; left:0;
    width:100%; height:211px; 
    padding: 10px;
    color:#fff;
    cursor: pointer;
    z-index:2; 
    background:rgba(0,0,0,0.6); 
    -webkit-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

.legenda:hover  {
    top:36px;
}

.legenda h4  {
    font-size: 1.800em;
}