jQuery Fade In a New Image from a New URL on Hover without Getting White "Blink"

Question

I am working within Squarespace so some of my options are limited (I can't add a separate image div and use that as a replacement, or if I can I'm not sure how). I am trying to slowly fade in a new image on hover but WITHOUT a full Fade Out -> Fade in Effect that results in a white "blink" in between. Other solutions on StackOverflow all seemed to contain the full Fade Out/Fade In and did not work.

HTML:

<div id='#block-2091ad01016e0c16fbf5'>
    <img class="thumb-image" 
src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg">
</div>

JS:

<script>
(function($) {
  $(document).ready(function() {
    $('#block-76b0ced63f31cd9e2342').mouseover(function() {
        $( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg");
    });
    $('#block-76b0ced63f31cd9e2342').mouseout(function() {
        $( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg");
    })
  })
})(jQuery);
</script>

Answer 1

I think you're much better off creating a second from JS and get this crossfade effect from css. See fiddle for example: https://jsfiddle.net/x0ye6r5L/

$(function() {
var jsonArt = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg" class="thumb-image" />';

$('#myDiv').prepend(jsonArt);
});