JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-helpers.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-anim.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-core.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-zoomTarget.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/jquery.zoomooz-zoomContainer.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/purecssmatrix.js"></script>
		<script type="text/javascript" src="http://janne.aukia.com/zoomooz/src/js/sylvester.src.stripped.js"></script>
<script type="text/javascript" charset="utf-8" src="http://theconfluencegroup.com/france/www.parti-socialiste.fr/bilan-sarkozy/js/jquery-plugins.js"></script>
<div class="shape shape-rotation zoomTarget" data-targetsize="1" data-duration="1000">
    <div class="bubble1 big">
             <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>

CSS

.shape {
    position:realtive;
    width:200px;
    height:200px;
    text-align:center;
    color:white;
    font-weight:500;
    line-height:70px;
    border-radius:3px;
    margin-bottom:40px;
    right:200px;
}
.shape-skew {
    background-color:#090;
    -webkit-transform:skewX(15deg) skewY(10deg);
    -moz-transform:skewX(15deg) skewY(10deg);
    margin-right:55px;
}
.shape-skew:hover {
    background-color:#0b0;
}
.shape-skew.selectedZoomTarget:hover {
    background-color:#090;
}
.shape-scale {
    -webkit-transform:scaleX(0.7) translateY(0px);
    -moz-transform:scaleX(0.7) translateY(0px);
    background-color:#27c;
    margin-right:50px;
}
.shape-scale:hover {
    background-color:#49e;
}
.shape-scale.selectedZoomTarget:hover {
    background-color:#27c;
}
.shape-rotation {
    background-color:#c43;
    -webkit-transform: rotate(-50deg) translateX(-60px);
    -moz-transform:rotate(-50deg) translateX(-60px);
}
.shape-rotation:hover {
    background-color:#e64433;
}
.shape-rotation.selectedZoomTarget:hover {
    background-color:#c43;
}

JavaScript

$('.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');

    });

});
$('.hidden_div').hide();
$('.bubble1').hover(function () {

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


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


    });

});