JSFiddle - React, Tailwind, and code Playground

by Giampaolo Tenti

HTML

<ol>
    <li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;"><div>Titanic</div></a></li>
    <li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;"><div>Titanic</div></a></li>
    <li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;"><div>Titanic</div></a></li>
    <li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;"><div>Titanic</div></a></li>
</ol>

CSS

ol {
  padding: 0px;
  list-style: decimal-leading-zero inside;
  color: #000;
  font-size: 0.9em;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
}

ol li {
  display: inline-block;
  margin: 5px 10px;
}

ol li a {
  background-color: #EEE;
  display: block;
  width: 200px;
  height: 40px;
  cursor: pointer;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin: 0;
    position:relative;
}

ol li a div {
    position:absolute;
    top:0;left:0;
    width:187px;
    height:40px;
    background:red;
   
}

JavaScript

$('a.song').each(function() {
      var origwidth = $(this).width();
      var origheight = $(this).height();
      $(this).hover(
        function() {
          $(this).find('div').stop().animate({width: origwidth * 2, height: origheight * 2});
        }, function() {
          $(this).find('div').stop().animate({width: origwidth, height: origheight});
      });
        $(this).clone(true).attr({"class":"song-detail"}).css({"z-index": 1, "background-color":"#CCC"}).appendTo('ol').wrap("<li></li>");
    });