JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div class='thumb'>
    <div class="tooltip">
        <div class="plus"></div>
        <div class="text_container">
            <div class="text">
                bla bla bla bla
            </div>
        </div>
    </div>
</div>

CSS

.thumb{
    width : 250px;
    height : 150px;
    background-color : #ababab;
    position : relative;
    margin : 10px;
    float : left;
}

.thumb .tooltip{
    position : absolute;
    width : 100%;
    height : 30px;
    bottom : 0px;
    overflow : auto;
}

.thumb .tooltip .plus{
    width : 30px;
    height : 30px;
    float : right;
    background-image : url('http://upstatefarmsfs.com/img/icon_plus.png');
    background-repeat : no-repeat;  
    cursor : pointer;  
}
.thumb .tooltip .text_container{
    width : 0px;
    height : 30px;
    float : right;
    background-color : #6b8f06;
    
    /* just to be shure */
    overflow : hidden;
    
}

.thumb .tooltip .text_container .text{
    color : #fff;
    text-align : center;  
    line-height : 30px;
    font-size : 10px;
    display : none;
}

JavaScript

for(var i=0,thumb=$('.thumb').clone();i<10;i++)
    thumb.clone().appendTo('body');

var constants = {
    animation : {
        easing : 'swing',
        duration : 300
    },
    fadein : {
        duration : 400,
        easing : 'swing'
    },
    fadeout : {
        duration : 200,
        easing : 'swing'
    }
};

function _mousein(e,tooltip,plus,text_container,text){
         var currentWidth = text_container.width(),
            targetWidth = Math.floor(tooltip.width() - plus.outerWidth(true)),
            duration = (targetWidth - currentWidth) * 100 / targetWidth * constants.animation.duration / 100;
            
            // hide text if it was visible
            text.stop().css({opacity:1,display:'none'});
        
            text_container 
                .stop()
                .css({
                    opacity : 1,
                    display : 'block'
                })
                .animate({width : targetWidth},{
                    duration : duration,
                    easing : constants.animation.easing,
                    complete : function(){
                        text.fadeIn(constants.fadein.duration,constants.fadein.easing);
                    }
                });
}
function _mouseout(e,text_container){
    text_container.stop().fadeOut(constants.fadeout.duration,constants.fadeout.easing,function(){
        text_container.width(0).show();
    });
}
$('.thumb .tooltip').hover(
    function(e){
        
        var that = this,
            tooltip = $(that),
            plus = tooltip.children('.plus'),            
            text_container = tooltip.children('.text_container'),
            text = text_container.children('.text'),
            children = $(this).children('.plus,.text_container');
        if($.inArray(e.target,children.get()) === -1)
            {
                children .bind('mouseover',function(){
                    _mousein.call(that,e,tooltip,plus,text_container,text);
                   ...