JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class='head-wrapper'>
    <div class='head' style='float: left; width: 100%; display: block; margin-top: 0px !important; margin-bottom: 0px; position: fixed; background-color: #000; color: #fff; line-height: 35px;height: 35px;'>
<a style='cursor: hand; cursor: pointer; display: inline-block;'>See 2011 Updates</a>

    </div>
</div>
<div class='title-div' style='z-index:0;display: block; margin: 0px; position: absolute; height: 74px; line-height: 74px; top: 41px; left: 0px;'>&nbsp;</div>
<div style='z-index:0;display: block; position: relative; width: 90%; padding-top: 80px; margin-right: auto; margin-left: auto;'>
    <div class="bubbleContainer" id="bubbleContainer1" style="position: absolute; top: 100px; left: 100px;">
        <div class="bubble1 big" style="background-image: url(images/1.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 60% auto;">
             <h1>services</h1>
            <p class="hidden_div">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula
                euismod elit, quis dignissim lectus aliquam a. Curabitur ut sagittis lorem.
                Vivamus vitae sapien vel nibh pellentesque varius. Integer ornare hendrerit
                justo sit amet fermentum.</p>
            <div class='image' align="center"><img src="http://placekitten.com/100/150"/></div>
            
        </div>
    </div>
</div>

CSS

body {
    margin: 0px auto;
}
html, body {
    height: 100%;
}
.hidden_div{
padding:20px;
    width:175px;
}
p{
    font-size:10px;
    position: relative;
    padding: 0px;
    text-align: center;
    margin-top:1%;
    margin-bottom:1%;
    width: 100%;
    display: inline-block;
    word-wrap: normal;
    //background: #000;
    font-family:'Scada', sans-serif;
    text-transform: uppercase;

    
}
canvas {
    border: 0px solid #9C9898;
}
.canvas {
    z-index: -2;
    animation: myfirst 5s;
    -moz-animation: myfirst 5s;
    /* Firefox */
    -webkit-animation: myfirst 5s;
    /* Safari and Chrome */
    -o-animation: myfirst 5s;
    /* Opera */
    -webkit-transition: all 7s ease;
    -moz-transition: all 7s ease;
    -ms-transition: all 7s ease;
    -o-transition: all 7s ease;
    transition: all 7s ease;
}
@keyframes myfirst {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
@-moz-keyframes myfirst
/* Firefox */
 {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
@-webkit-keyframes myfirst
/* Safari and Chrome */
 {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
@-o-keyframes myfirst
/* Opera */
 {
    from {
        opacity:0;
        filter:alpha(opacity=0);
    }
    to {
        opacity:1;
        filter:alpha(opacity=1);
    }
}
.colored-bg {
    margin:0px auto;
    height: 190px;
    width: 190px;
    
    background-color: #228c53;
    //transition: width .7s, height .7s, margin .7s;
    //-moz-transition: width .7s, height .7s, margin .7s, -moz-transform 7s;
    //-webkit-transition: width .7s, height .7s, margin .7s, -webkit-transform 7s;
    //-o-transition: width .7s, height .7s, margin .7s, -o-transform 7s;
}
div.colored-bg:hover {
    //height: 216px;
    //width: 216px;
   ...

JavaScript

// THIS ONE LOADS BUBBLES & HOVER EFFECTS

$(document).ready(function () {

    $('.hidden_div').hide();

});


$('.bubble1').animate({
    opacity: 1,
    width: ['toggle', 'swing','50'],
    height: ['toggle', 'swing','50'],
    margin: '-75%'
}, 400, function () {

$(".bubble1").on('scale', function (e, s) {
        var data = $.data(this, 'size'),
            w = data.width,
            h = data.height;
        $(this).stop().animate({
            width: w * s,
            height: h * s,
            marginLeft: data.marginLeft - w * (s - 1) / 2,
            marginTop: data.marginTop - h * (s - 1) / 2
        });
    }).each(function () {
        var $this = $(this);
        $.data(this, 'size', {
            width: $this.width(),
            height: $this.height(),
            marginLeft: parseInt($this.css('margin-left')),
            marginTop: parseInt($this.css('margin-top'))
        });
    }).hover(function () {
        $(this).trigger('scale', [1.5],'2000');
    }, function () {
        $(this).trigger('scale', [1.0],'2000');

    });

});

$('.bubble1').hover(function () {

    $('.hidden_div').fadeIn();


    $('.bubble1').on("mouseleave", function () {
        $('.hidden_div').fadeOut();


    });

});