imagemouseoverfadeinfadeout

Mouseover image change

I am trying to make a blur image change on mouseover. Something like camera zooming in and out with certain things get blurred when other is zoomed in. Best way to understand what I want is to see it here: http://berger.co.rs/test/test.html

And I have only one problem. The mouseover image is always behind the active image. I need to have only active image and when mouseover is applied, then to change images. Also, I don't want active image to disappear in total, and then to load mouseover image. I need it like on example above, just not to have mouseover image shown behind all the time.

You can see whole code I have inside of the page source.

Can you please help me?

Solution

  • The problem is just that you didn't provide Jquery for $() commands to work. "alturl.com/bcfhv" isn't correct.

    Here, put this on file, it's working:

    <html>
<body>
<style>
    div{ 
        position:relative; 
        width:714px; 
        height:420; 
        overflow:hidden; 
    } 
    span { 
        position:absolute; 
        top:0px; 
        left:-0px; 
    } 
</style>
<div> 
    <img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/> 
    <span> 
        <img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/> 
    </span> 
</div>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function() { 
        alert('ok')
        $("div").hover(function() { 
            $("span").fadeIn(); 
        }, function() { 
            $("span").fadeOut(); 
        }); 
    })
</script>

</body>
</html>

    Or see it working here