JSFiddle - React, Tailwind, and code Playground

HTML

<div class="large-16 columns item">
    <div class="box">
        <div class="image">
            <img src="http://www.hdwallpapers.in/walls/sunflower_landscape-wide.jpg" width="520px" />
        </div>
        <div class="data red">
             <h1><a href="www.google.de" title="headliner" target="_blank">SEHR LANGER BANDNAME AHOI</a></h1>

             <h2><a href="" title="venue" target="_blank"></a></h2>

            <p class="date">So, 28.07.2013</p>
            <p class="supportbands">+ <a href="" title="Test Support" target="_blank">Test Support</a> 
            </p>
        </div>
    </div>
</div>

CSS

.showsblock .item {
    height: 300px;
}
div.box {
    position: relative;
}
img {
    border: 1px solid #a2a2a2;
}
div.data {
    position:absolute;
    top:0;
    bottom:0;

    background: rgba(0, 0, 0, 0.5);
    height:150px;
}