Fade in Effect Image Change

Question

With this code for the fade in and fade out effect how do you swap out the normal background for a jpg file? Or is there a better way to code this effect in? Im more looking for a zoom and fade effect that is used to check out the show better. I am newer to coding and am not sure! Help will be appreciated.

.image-box {
  width: 300px;
  overflow: hidden;
}
.image {
  width: 300px;
  height: 200px;
  background: url("http://lorempixel.com/300/200");
  background-position: center;
  transition: all 10s ease;
  -moz-transition: all 10s ease;
  -ms-transition: all 10s ease;
  -webkit-transition: all 10s ease;
  -o-transition: all 10s ease;
}
.image-box:hover .image {
  transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
  /* IE6 and 7 */
}

.image-box, .image {
  position: relative;
}
.image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}
.label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  font-weight: bolder;
}
.image-box:hover .image:after {
  opacity: 0.5;
}


<div class="image-box">
    <div class="image"></div>
    <div class="label">LABEL</div>
  </div>

Answer 1

You can simply change the background to either background-image or content depending on your intended effect with your hover and after classes. If you swap the image I linked with background-image and content you'll see the difference but I'm not 100% sure which end result you're trying for. If you need to use background-image you'll also want to add background-size: 300px 200px; so you can control the size of that image if it's not the same size as the container like I used. The way you handled the transition is fine, but if you want to get into something more elegant you could always use @keyframe animations. See https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes and https://animate.style/ for some examples you can use.

.image-box {
  width: 300px;
  overflow: hidden;
}

.image {
  width: 300px;
  height: 200px;
  content: url("https://i.imgur.com/tLbcRIF.jpeg");
  background-position: center;
  transition: all 10s ease;
}

.image-box,
.image {
  position: relative;
}

.image-box:hover .image {
  transform: scale(1.5);
}

.image:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  transition: all 1s ease;
}

.label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  font-weight: bolder;
}

.image-box:hover .image:after {
  opacity: 0.5;
}

<div class="image-box">
  <div class="image"></div>
  <div class="label">LABEL</div>
</div>