CODEWITHSUNDEEP
javascriptanimationmootools
ARIF MAHMUD RANA
ARIF MAHMUD RANA

Reputation: 5176

mootools image enlarge on mouse hover plugin

I am looking for a mootools plugin which will enlarge image on mouseover over the current image. So when a user is hovering on a image user feel the image is enlarged. Very close to my requirements were http://highslide.com/. Here is a sample I found http://jsfiddle.net/Jmeks/2/. I need exactly like this using mootools with some mootools effect. Any help greatly appreciated.

Upvotes: 1

Views: 603

Answers (1)

user1726343
user1726343

Reputation:

Does this fiddle work for you? EDIT: I have changed the link so that it uses the transform css property as you required.

JavaScript:

window.myFx = new Fx({
        duration: 300,
        transition: Fx.Transitions.Sine.easeOut
});
myFx.set = function(value) {
        var style = "scale(" + (value) + ")";
        $('content-block').setStyles({
            "-webkit-transform": style,
            "-moz-transform": style,
            "-o-transform": style,
            "-ms-transform": style,
            transform: style
        });
    }
$('content-block').addEvent('mouseover', function() {
    myFx.start(1,1.4);
});
$('content-block').addEvent('mouseout', function() {
    myFx.start(1.4,1);
});

Upvotes: 2

Related Questions