Contao jQuery Template to change the a <img src="img.jpg"> to <img src="img_hover.jpg"> on mouseover

j_hoverImg.html5

<script>
(function($) {
$(document).ready(function() {

        var fadeDuration = 500;

        $('.hover-img').each(function(i, el) {
                el = $(el);
                if(el.css('position') != 'absolute')
                        el.css('position', 'relative');

                var org = el.find('img').first();

                var hover = $(org.clone());
                hover.attr('src', hover.attr('src').replace(/(.*)(\.[a-z]+)$/, "$1_hover$2"));
                hover.css({
                        "position": "absolute",
                        "display": "block",
            "opacity": 0
                });
                hover.insertAfter(org);

        el.mouseenter(function() {

                        hover.css({
                                top: org.position().top,
                                left: org.position().left
                        });

            hover.animate({'opacity': 1}, {queue: false, duration: fadeDuration});
            org.animate({'opacity': 0}, {queue: false, duration: fadeDuration});
                });

        el.mouseleave(function() {
            hover.animate({'opacity': 0}, {queue: false, duration: fadeDuration});
            org.animate({'opacity': 1}, {queue: false, duration: fadeDuration});
        });

        });

});
})(jQuery);

</script>

usage.html

<img class="hover-img" src="mypic.png">

<div class="hover-img"><img src="anotherpic.jpg"></div>