JSFiddle - React, Tailwind, and code Playground

HTML

<div id="kwick">
    <ul id="kwicks">
        <li><a class="kwick john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon"><span>John Lennon</span></a></li>
        <li><a class="kwick paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney"><span>Paul McCartney</span></a></li>
        <li><a class="kwick george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison"><span>George Harrison</span></a></li>
        <li><a class="kwick ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr"><span>Ringo Starr</span></a></li>
    </ul>
</div>

CSS

#kwick                        { width:590px; }
    #kwicks                 { height:143px; list-style-type:none; margin:0; padding:0; }
#kwick li                     { float:left; }
#kwick .kwick                 { display:block; cursor:pointer; overflow:hidden; height:143px; width:134px; }
#kwick .kwick span             { display:none; }

#kwick .john                 { background-color: red; }
#kwick .paul                 { background-color: blue; }
#kwick .george                 { background-color: green; }
#kwick .ringo                 { background-color: orange; }

JavaScript

var Kwicks = new Class({
    
    Implements: [Options],
    
    options: {
        squeezeWidth: 100,
        maxWidth: 285
    },
    
    initialize: function(list,options) {
        this.setOptions(options);
        this.list = document.id(list);
        this.parse();
    },
    
    parse: function() {
        //vars
        var items = this.list.getElements('a'),
            fx = new Fx.Elements(items, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut}),
            startWidths = [],
            options = this.options;
        //kwicks items
        items.each(function(item,i) {
            startWidths.push(item.getStyle('width').toInt());
            item.addEvent('mouseenter',function(){
                var fxSettings = {};
                fxSettings[i] = {
                    'width': [item.getStyle('width').toInt(),options.maxWidth]
                };
                items.each(function(sibling,ii) {
                    if(sibling != item) {
                        var w = sibling.getStyle('width').toInt();
                        if (w != options.squeezeWidth) {
                            fxSettings[ii] = {
                                'width': [w,options.squeezeWidth] 
                            };
                        }
                    }
                },this);
                fx.start(fxSettings);
            },this);
        },this);
        //list
        this.list.addEvent('mouseleave',function() {
            var fxSettings = {};
            items.each(function(item,i) {
                fxSettings[i] = {
                    width: [item.getStyle('width').toInt(), startWidths[i]]
                };
            });
            fx.start(fxSettings);
        });
    }
});

/* USAGE */
window.addEvent('domready',function() {
    var kwicks = new Kwicks('kwicks');
});