<div class="fade">
    <img id="pic1" src="http://dummyimage.com/100x100" alt="" />
    <img id="pic2" src="http://dummyimage.com/100x100" alt="" />
    <img id="pic3" src="http://dummyimage.com/100x100" alt="" />
    <img id="pic4" src="http://dummyimage.com/100x100" alt="" />
</div>


$$("div.fade").each(function(container) {
    container.getChildren().each(function(child) {
        var siblings = child.getParent().getChildren().erase(child);
        child.addEvents({
            mouseenter: function() {
                siblings.set("tween", {
                    duration: 400
                }).tween("opacity", 0.4);
            },
            mouseleave: function() {
                siblings.set("tween", {
                    duration: 400
                }).tween("opacity", 1);
            }
        });
    });
});

http://jsfiddle.net/5mfdt/

via [http://davidwalsh.name/opacity-focus](http://davidwalsh.name/opacity-focus)

MooTools: Focus Single Element (Siblings Fade)

javascript

JavaScript