div.contenant {
    width: 500px;  /*largeur du contenant, la meme que celle de l image*/
    height: 300px; /*hauteur du contenant, la meme que celle de l image*/
    overflow: hidden;
}
 div.contenu {
    width: 500px;  /*largeur du contenu, la meme que celle de l image*/
    height: 300px; /*hauteur du contenu, la meme que celle de l image*/
    overflow: auto;  /*pour apparition d une scroll bar si le texte est trop long*/
 }
.contenant img {
    width: 500px; /*largeur de l image*/
    height: 300px;  /*hauteur de l image*/
    position: relative;  
    bottom: $$$px; /*ici mettre la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}
.contenant:hover img {  /*au survol de la souris sur le bloc*/
    bottom: $$$px; /*ici mettre deux fois la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}