JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<div class=wrap>
  <div class=copy>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
  </div>
</div>

CSS

.wrap {
    position: relative;
    overflow: hidden;
    height: 300px;
    width: 150px;
    background: #333;
}

.copy {
    position: absolute;
    bottom: 0;
    widht: 100%;
    height: 30px;
    background: #ccc;
    padding: 10px;
}

JavaScript

jQuery.fn.wonderWall = function (){
  return this.each(function(i, el){
    var $el = jQuery(el),
        copy = $el.find('.copy'),
        height = copy[0].scrollHeight;
    console.log($el, copy, height);
    copy.css('height', '30px');
    
    $el.bind('mouseenter', function (){
      copy.animate({ height: height + 'px'});
    }).bind('mouseleave', function (){
      copy.animate({ height: '30px' })
    });
  }); 
};

$('.wrap').wonderWall();