Могу подсказать два способа 1ый через position;
.maria
.foto
width: 510px
height: 794px
background: url(../img/maria.png) no-repeat
float: right
position:absolute
bottom:0px
right:0px
.foto:hover
background: url(../img/mariahover.png) no-repeat
.oleg
.foto
width: 510px
height: 794px
background: url(../img/oleg.png) no-repeat
float: left
position:absolute
bottom:0px
left:0px
.foto:hover
background: url(../img/oleghover.png) no-repeat
.trainers
min-height: 100vh
height: 100vh
background: url(../img/bg-trainers.jpg)
background-size: cover
background-position: center
position: relative
Второй он не кросс платформенный.
Воспользуйтесь flex
FLEX
Тут краткий обзор flexa