JSFiddle - React, Tailwind, and code Playground
HTML
<section class="songs">
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic2</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic3</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic4</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic5</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic6</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic7</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic8</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic9</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic10</a>
<a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic11</a>
</section>
CSS
.songs .col {
max-width: 18%;
overflow: hidden;
display: inline-block;
vertical-align: top;
margin: 0 5px;
}
.songs a {
display: block;
margin: 10px 10px;
background-color: #EEE;
width: 200px;
height: 40px;
cursor: pointer;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
.songs a.song-detail {
z-index: 1;
background-color: #CCC;
}
JavaScript
$('a.song').each(function () {
var origwidth = $(this).width();
var origheight = $(this).height();
$(this).hover(
function () {
$(this).stop().animate({
width: origwidth * 2,
height: origheight * 2
});
}, function () {
$(this).stop().animate({
width: origwidth,
height: origheight
});
});
$(this).clone(true).attr({
"class": "song-detail"
}).appendTo('.songs');
});
var container;
var i = 0;
var numCols = 5;
var colCount = Math.ceil($('.songs a').length / numCols);
$('.songs a').each(function () {
if (i % colCount === 0) {
container = $('<div class="col"></div>').appendTo(".songs");
}
$(this).appendTo(container);
i++;
});