JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<img src="http://placekitten.com/600/500" class="appearSelector" title="OMG SO CUTE!">
<img src="http://placekitten.com/300/500" class="staticSelector" title="Different Title">
<img src="http://placekitten.com/400/300" class="appearSelector" title="Facebook Like">
<img src="http://placekitten.com/500/500" class="truncateSelector" title="OMFG THIS IS UNBELIEVABLE SO SIMPLE AND NICE AND EVEN TRUNCATES TEXT FOR ME WOW!">
<img src="http://placekitten.com/400/600" class="appearSelector" title="OMG SO CUTE!">
<img src="http://placekitten.com/600/400" class="staticSelector" title="OMFG THIS IS UNBELIEVABLE SO SIMPLE AND NICE AND EVEN TRUNCATES TEXT FOR ME WOW!">
<img src="http://placekitten.com/600/600" class="appearSelector" title="OMG SO CUTE!">
<img src="http://placekitten.com/600/200" class="staticSelector" title="OMG SO CUTE!">

CSS

.titlePop{
    display:inline-block;
    position:relative;
    }
    .titlePop img{
        display:block;
        }
    .titlePop .titlePop-title{
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        cursor:default;
    
        color:#fff;
        font-size:24px;
        padding:20px;   
    
        text-shadow:0 1px 4px rgba(0,0,0,0.2);

        background-color: rgba(0,0,0,0);
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)));
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.8));
        background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.8));
        background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.8));
        background-image:         linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        font-smoothing: antialiased;
        }
        .titlePop .titlePop-title.titlePop-appear{
            opacity:0;
            -webkit-transition: opacity 0.3s ease; 
            -moz-transition: opacity 0.3s ease; 
            -o-transition: opacity 0.3s ease; 
            transition: opacity 0.3s ease; 
            }
        .titlePop:hover .titlePop-title.titlePop-appear{
            opacity:1;
            }
        .titlePop .titlePop-title.titlePop-truncate{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }   



body{
    padding:10px;
    font-family:arial;
}

JavaScript

;(function($){
    $.fn.extend({
        titlePop: function(options) {
            this.defaultOptions = {
                appear: true,
                truncate: false
            };

            var settings = $.extend({}, this.defaultOptions, options);

            return this.each(function() {
                var $this = $(this),
                    title = $this.attr('title');                        
                
                if(title){
                    var tpa = settings.appear ? ' titlePop-appear' : '';
                    var tpt = settings.truncate ? ' titlePop-truncate' : '';
                    $this.wrap('<div class="titlePop"></div>').before('<div class="titlePop-title'+tpa+tpt+'">'+title+'</div>');
                }
            });
        }
    });
})(jQuery);

$('.appearSelector').titlePop();
$('.staticSelector').titlePop({appear:false});
$('.truncateSelector').titlePop({appear:false, truncate: true});