Esto es lo más lejos que logré llegar. La imagen de fondo se configura con css en línea en el contenedor (de lo contrario, no funciona).
¿Cómo puedo tener algún tipo de transición suave entre el cambio de imagen?
function onmouseover(){ // alert("Hello! I am an alert box!!"); var element = document.getElementById('conf'); element.style.backgroundImage = "url('/imgs/jpg/stats.jpg')"; } function onmouseout(){ // alert("Hello! I am an alert box!!"); var element = document.getElementById('conf'); element.style.backgroundImage = "url('/imgs/jpg/welcome_back.jpg')"; }Este código en realidad está cambiando la imagen de fondo que ya está configurada. Esta transacción está ocurriendo muy rápido y nítido.
background es una de las propiedades CSS animables para que pueda establecer una transición en él.
Este fragmento usa el código proporcionado en la pregunta con un elemento con id conf que tiene un elemento subdiv sobre el que puede desplazarse. Lo principal que se ha establecido es:
transition: background-image 1s linear;en conf para que los fondos cambien sin problemas.
const conf = document.getElementById('conf'); const subdiv = document.getElementById('subdiv'); subdiv.addEventListener('mouseover', onmouseover); subdiv.addEventListener('mouseout', onmouseout); function onmouseover() { // alert("Hello! I am an alert box!!"); var element = document.getElementById('conf'); element.style.backgroundImage = "url('https://picsum.photos/id/1015/200/300')"; } function onmouseout() { // alert("Hello! I am an alert box!!"); var element = document.getElementById('conf'); element.style.backgroundImage = "url('https://picsum.photos/id/1016/200/300')"; } #conf { transition: background-image 1s linear; width: 50vw; height: 50vw; background-image: url('https://picsum.photos/id/1016/200/300'); background-size: cover; } #subdiv { width: 20vw; height: 20vw; background-color: yellow; font-size: 30px; } <div id="conf"> <div id="subdiv">Hover over me</div> </div>Puede lograr esto solo con HTML y CSS usando la propiedad de transition
img { position:absolute; transition: opacity 1s ease-in-out; } img.top:hover { opacity:0; } <img src="https://picsum.photos/id/237/200/300" /><img class="top" src="https://picsum.photos/id/238/200/300" />