JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div class="arena-record-container">
    <div class="arena-book-jacket"><a href="#" target="_self"><img src="http://placehold.it/1400x90" alt="Omslagsbild" title="New selected stories"></a>

    </div>
    <div class="arena-record-details">
        <div class="arena-record-title"><a href="#" target="_self"><span>Test 1</span></a>
        </div>
    </div>
</div>
<div class="arena-record-container">
    <div class="arena-book-jacket"><a href="#" target="_self"><img src="http://placehold.it/1400x90" alt="Omslagsbild" title="New selected stories"></a>
    </div>
    <div class="arena-record-details">
        <div class="arena-record-title"><a href="#" target="_self"><span>Test 2</span></a>
        </div>
    </div>
</div>

CSS

.arena-record-container {
    float: left;
    margin-right: 10px;
    width: 90px;
}

.arena-book-jacket {
    background-color: #eee;
    width: 90px;
    height: 140px;
    overflow: hidden;
    position: relative;
}
.arena-book-jacket img {
    width: 90px;
    height: 140px;

    opacity: 0.7;
}
.arena-book-title-wrapper {
    position: absolute;
    top: 0;
    z-index: 1;
}
.arena-book-title {
    height: 130px;
    padding: 0 10px;
    width: 90px;
    vertical-align: middle;
    display: table-cell;
}

JavaScript

$('.arena-record-container').each(function (i) {
    var mediaTitle = $(this).find('.arena-record-title a span').text();
    $(this).find('.arena-book-jacket a').append('<div class="arena-book-title-wrapper"><span class="arena-book-title">' + mediaTitle + '</span></div>');
    $(this).find('.arena-record-title a span').text('');
});