opacidad y transicion

.imagen-diferenciales{
    width: 200px;
    height: 400px;
    border: 2px solid black;
    border-radius: 20px;
    transition: all 400ms;
}
.imagen-diferenciales:hover{
    width: 300px;
    height: 500px;
    border-color: red;

}

Te dejo el codigo de arriba para que puedas ver el punto que quiero explicarte. Te invito a probar cambiando la propiedad transition de lugar en el codigo. Refiriendome a la debida documentación: https://developer.mozilla.org/en-US/docs/Web/CSS/transition "Transitions enable you to define the transition between two states of an element." Traducido, las transiciones te permiten definir la transición entre dos estados de un elemento. Es decir que no necesariamente debe estar como lo planteas, sino que está puesto de esta forma para dar el efecto de opacidad al pasar sobre el mouse (esto según el ejemplo que subiste). Esto lo ve el desarrollador como mejor le parezca y según lo que se desee lograr