JSFiddle - React, Tailwind, and code Playground

HTML

<div id="siteWrap">
    <div id="bubbleWrap" style="visibility: hidden;">
        <div class="bubble">
            <img src="http://dummyimage.com/300x100&text=eins" alt="eins" />
        </div>
        <div class="bubble">
            <img src="http://dummyimage.com/300x100&text=zwei" alt="zwei" />
        </div>
        <div class="bubble">
            <img src="http://dummyimage.com/300x100&text=drei" alt="drei" />
        </div>
    </div>
    <div id="pageWrap">
        <div class="page">
            <a href="#"><img src="http://dummyimage.com/100x120&text=1" alt="1" /></a>
        </div>
        <div class="page">
            <a href="#"><img src="http://dummyimage.com/100x120&text=2" alt="2" /></a>
        </div>
        <div class="page">
            <a href="#"><img src="http://dummyimage.com/100x120&text=3" alt="3" /></a>
        </div>
    </div>
</div>

CSS

body { margin: 0; padding: 0; }
img { display: block; }
div#siteWrap { position: relative; height: 235px; padding: 0px 0 0 0; }
div.bubble { position: absolute; top: 15px; left: 0; }
div#pageWrap { position: absolute; bottom: 0; left: 0; }
div.page { float: left; }

JavaScript

var bubbles = $$("div.bubble");
var pages = $$("div.page");
$("bubbleWrap").setStyle("visibility", "visible");
bubbles.setStyle("opacity", 0);

pages.each(function(el, i) {
    el.set("morph", { link: "cancel" });
    el.addEvents({
        mouseenter: function() {
            bubbles[i].morph({
                opacity: 1,
                marginTop: "-15px"
            });
        },
        mouseleave: function() {
            bubbles[i].morph({
                opacity: 0,
                marginTop: 0
            });
        }
    });
});