JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="img">
  <div class="caption">
    <div class="caption-fullscreen">
      <img src="http://dddd.guitarist.pp.ua/full.png" class="has-tip tip-left"
      data-position="left" title="На весь экран" />
    </div>
    <div class="caption-info">
      <img src="http://dddd.guitarist.pp.ua/inf.png" class="has-tip tip-left"
      data-position="left" title="Последующее появление человека, развитие им сельского хозяйства и цивилизации явились причиной влияния на Землю быстрее." />
    </div>
    <div class="caption-share">
      <img src="http://dddd.guitarist.pp.ua/share.png"
      class="has-tip tip-left" data-position="left" title="Поделиться" />
    </div>
    <div class="caption-comment">
      <img src="http://dddd.guitarist.pp.ua/comme.png"
      class="has-tip tip-left" data-position="left" title="10 комментариев" />
    </div>
  </div>
  <img src="http://4.bp.blogspot.com/-9cjMf1On-Do/U1LgXJgD4LI/AAAAAAAAAFw/Fd7IuwayrpI/s1600/1380825_687124934632615_1604199254_n.jpg" />
</div>
<div class="img">
  <div class="caption">
    <div class="caption-fullscreen">
      <img src="http://dddd.guitarist.pp.ua/full.png" class="has-tip tip-left"
      data-position="left" title="На весь экран" />
    </div>
    <div class="caption-info">
      <img src="http://dddd.guitarist.pp.ua/inf.png" class="has-tip tip-left"
      data-position="left" title="Подробнее" />
    </div>
    <div class="caption-share">
      <img src="http://dddd.guitarist.pp.ua/share.png"
      class="has-tip tip-left" data-position="left" title="Поделиться" />
    </div>
    <div class="caption-comment">
      <img src="http://dddd.guitarist.pp.ua/comme.png"
      class="has-tip tip-left" data-position="left" title="10 комментариев" />
    </div>
  </div>
  <img src="http://www.fullscreensavers.com/pics/magic04.jpg" />
</div>
<div class="img">
  <div class="caption">
    <div class="caption-fullscreen">
      <img src="http://dddd.guitarist.pp.ua/full.png" class="has-tip tip-left"
     ...

CSS

.img img {
    width:300px;
    height:150px;
    display:block;
}

.img {
    position:relative;
    width:300px;
    height:150px;
    cursor:pointer;
    float:left;
    transition:0.4s;
    overflow:hidden;
}
.img.active::after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    background: url(https://web.cs.dal.ca/~jamie/CS3172/examples/CSS/badlayout/background/trans-pattern-64x64.png) repeat;
    background-color:rgba(0,0,0,1);
    transition:0.4s;
    opacity:0.5;
}

.img.active:hover::after {
    opacity:0;
    transition:0.4s;
    background-color:rgba(0,0,0,0);
}

.img .caption::after {
    width:0px;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    content:""; 
    transition:0s;
    background:rgba(0,0,0,0.6);
}

.img.active:hover .caption::after {
    width:50px;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    content:""; 
    transition:0.2s ease-out;
}

.img .caption .caption-fullscreen img, .img .caption .caption-info img, .img .caption .caption-share img, .img .caption .caption-comment img {
    position:absolute;
    display:none;  
    width:20px;
    height:20px;
    top:0;
    right:15px;
    z-index:10;
}

.img .caption .caption-fullscreen img {
    top:12px;
    z-index:10;
}

.img .caption .caption-info img {
    top:48px;
    z-index:10;
}

.img .caption .caption-share img {
    top:84px;
    z-index:10;
}

.img .caption .caption-comment img {
    top:120px;
    z-index:10;
}

.img.active:hover .caption .caption-fullscreen img, .img.active:hover .caption .caption-info img, .img.active:hover .caption .caption-share img, .img.active:hover .caption .caption-comment img {
    display:block;  
}

.tip {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
  color: #eeeeee;
  font-size: 14px;
  font-family:arial;
  line-height: 16px;
  max-width: 200px;
  padding: 4px 8px;
  position:relative;
  margin-left:-15px;
}

.tip[class*="arrow"]:before {
 ...

JavaScript

$('.img').hover(  
        function(e){ 
            setTimeout(function () {
                $('.img').addClass('active')
            }, 40);  
        }, 
        function(e){ 
            setTimeout(function () {
                $('.img').removeClass('active')
            }, 40);  
        }
    );
    $('.img').hover(  
        function(){ 
            $('.caption div').css('display', 'none');
            setTimeout(function () {
                $('.caption div').css('display', 'block')
            }, 200);  
        }
    );

;(function ($, window, document, undefined) {

    var pluginName = "frosty";
    var defaults = {
        attribute: 'title',
        className: 'tip',
        content: '',
        delay: 0,
        hasArrow: true,
        html: false,
        offset: 10,
        position: 'top',
        removeTitle: true,
        selector: false,
        trigger: 'hover',
        onHidden: function() {},
        onShown: function() {}
    };

    function Frosty(anchor, options) {
        this.anchor = anchor;
        this.$anchor = $(anchor);
        this.options = $.extend({}, defaults, options, this.$anchor.data());
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Frosty.prototype = {
        init: function () {
            this._createTip();
            this._bindEvents();
        },

        show: function() {
            var _this = this,
                delay = typeof this.options.delay === 'object' ? parseInt(this.options.delay.show) : parseInt(this.options.delay);
            
            clearTimeout(this.timeout);
            this.timeout = delay === 0 ? 
                this._setState('visible') : 
                setTimeout(function() { _this._setState('visible'); }, delay); 
        },

        hide: function() {
            var _this = this
                delay = typeof this.options.delay === 'object' ? parseInt(this.options.delay.hide) : parseInt(this.options.delay);

           ...