Edit in JSFiddle

<div class="section">
  <div class="section__bg section__bg--1" style="background-image: url(https://placeimg.com/1000/500/any)"></div>
  <div class="section__bg section__bg--2" style="background-image: url(https://placeimg.com/1000/600/any)"></div>
  <div class="section__content">Контент</div>
</div>
.section {
  position: relative;
}

.section__bg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eee;
  background-size: cover;
  background-position: center center; 
  transition: opacity .5s;
}

.section__bg--1 {
  
}

.section__bg--2 {
  opacity: 0;
}

.section:hover .section__bg--1 {
  opacity: 0;
}

.section:hover .section__bg--2 {
  opacity: 1;
}

.section__content {
  position: relative;
  z-index: 10;
  min-height: 400px;
}