Image fade to new image on hover

I am trying to change the background image of a div when a user hovers on an item on the page. I know there has to be a better way to do this.... This is what I have now. '#11' is the div that will be hovered over. '#treeBG' is the div whose background image should change Current image is bg.jpg and I want that to fade out and blur.jpeg to fade in, in its place. $(function() { $('#11').hover(function() { $('#treeBG').css('background-image', 'url("blur.jpeg")'); $('#treeBG').css('width', '100%'); $('#treeBG').css('background-size', 'cover'); $('#treeBG').css('background-repeat', 'no-repeat'); }, function() { // on mouseout, reset the background image $('#treeBG').css('background-image', 'url("blur.jpeg")'); }); }); I have the image changing no problem, I just want it to have a fade transition to look nicer. Any ideas?