JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<a href="#" id="circle" class="ec-circle">
    <h3>Hovered</h3>
</a>

CSS

.ec-circle{
    width: 420px;
    height: 420px;
    -webkit-border-radius: 210px;
    -moz-border-radius: 210px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(../images/1.jpg) no-repeat center center;
    box-shadow:
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
}
.ec-circle-hover{
    box-shadow:
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}
.ec-circle:hover{
    box-shadow:
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}

JavaScript

$.CircleEventManager            = function( options, element ) {
     
    this.$el            = $( element );
     
    this._init( options );
     
};
 
$.CircleEventManager.defaults   = {
    onMouseEnter    : function() { return false },
    onMouseLeave    : function() { return false },
    onClick         : function() { return false }
};
 
$.CircleEventManager.prototype  = {
    _init               : function( options ) {
         
        this.options        = $.extend( true, {}, $.CircleEventManager.defaults, options );
         
        // set the default cursor on the element
        this.$el.css( 'cursor', 'default' );
         
        this._initEvents();
         
    },
    _initEvents         : function() {
         
        var _self   = this;
         
        this.$el.on({
            'mouseenter.circlemouse'    : function( event ) {
                 
                var el  = $(event.target),
                 
                          circleWidth   = el.outerWidth( true ),
                          circleHeight  = el.outerHeight( true ),
                          circleLeft    = el.offset().left,
                          circleTop     = el.offset().top,
                          circlePos     = {
                              x     : circleLeft + circleWidth / 2,
                              y     : circleTop + circleHeight / 2,
                              radius: circleWidth / 2
                          };
                 
                // save cursor type
                var cursor  = 'default';
                 
                if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
                    cursor = 'pointer';
                     
                el.data( 'cursor', cursor );
                 
                el.on( 'mousemove.circlemouse', function( event ) {
 
                    var distance    = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );
                ...