Как можно создать эффект плавного слияния между фотографиями?

Как создать плавное слияние между двумя фотографиями, чтобы эффект был максимально привлекательным и естественным?

Практически весь код нужно выкинуть.. <br/> <pre><code class="css">/*.photo__section {*/
.photo__colage {
  /*height: 857px;*/
  /*display: flex;*/
  /*display: inline-block;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.photo__photo {
  /*width: 477px;*/
  /*height: 357px;*/
  /*position: relative;*/
  /*flex-direction: column;*/
  /*justify-content: space-between;*/
  background-size: cover;
  /*margin-left: 0;*/
  /*vertical-align: right;
  /*justify-content: space-between;
  flex-direction: column;*/
}</code></pre>

<pre><code>.photo__section {
  height: 857px;
  display: flex;
  // здесь вы перетираете display flex на inline-block, из-за этого flex-свойства работать не будут
  display: inline-block;
  justify-content: space-between;
  align-items: center;
}

.photo__colage {
// это стили для обёртки, а не для элементов
  display: flex;
  flex-wrap: wrap;
}
.photo__photo {
  width: 477px; // это же для одного фото? Если для обёртки, то надо перенести в . photo__colage
  height: 357px;
  position: relative;
  background-size: cover;
  margin-left: 0;
  // не знаю, зачем вам здесь эти стили, но без display: flex они не сработают
  flex-direction: column;
  justify-content: space-between;
}</code></pre>