• HTML
• CSS

HTML

<div class="container">
    <div class="imgs">
        <img src="frelements_frel_1.png">
        <img src="frelements_frel_2.png">
    </div>
</div>

CSS

/*
   Con la proiedad 'overflow' de valor 'hidden' recortamos el 
   contenido excedente y las barras de desplazamiento,también, 
   no se mostraran
*/
.container{
    width:100px;
    height:100px;
    cursor:pointer;
    overflow:hidden;
    border:5px solid #fc8021;
    border-radius:10px;
}
/*
    Aquí indicamos el tamaño de la imagen con un ancho 100% 
    y una altura similar al  contenedor padre de 100px
*/
.imgs img{
    width:100%;
    height:100px;
}
/*
    Aquí aplicamos la transición al selector 'imgs' de 0.3 segundos  y con un modificador de a todo 'all'
*/
.imgs{
    transition:0.3s all;  
}
/*
    Cuando el curso está sobre la imagen , la pseudo-clase 'hover' se activa y aplica una margen superior 
    de valor -100px. Lo cual muestra un efecto de cambio
*/
.container:hover .imgs{
    margin-top:-100px;
}