.block{
background-image: url(картинка-1)
}
.block:hover{
background-image: url(картинка-2)
}
<div class="block">
<img src="" alt="" class="img-1">
<img src="" alt="" class="img-2">
</div>
.block{
position: relative;
width: 100px;
height: 100px;
}
.img-1, .img-2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-2{
opacity: 0;
}
.block:hover .img-1{
opacity: 0;
}
.block:hover .img-2{
opacity: 1;
}