Fade in Effect Image Change - html

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>