<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#aussteller" role="tab" data-toggle="tab">Aussteller</a></li>
<li role="presentation"><a href="#calender" role="tab" data-toggle="tab">Kalender</a></li>
</ul>
<div class="tab-content" id="meta-tab">
<div class="tab-pane fade" id="calender">
<ul class="list-group">
<li class="list-group-item">text01</li>
<li class="list-group-item">text02</li>
<li class="list-group-item">text03</li>
<li class="list-group-item">text04</li>
<li class="list-group-item">text05</li>
</ul>
</div>
<div class="tab-pane fade in active" id="aussteller"><div class="col-lg-6 col-sm-6 col-md-6">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="panel">
<div class="panel-body">
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
<div class="row text-justify">
<h3>Tab1</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, doloremque, dolores, autem eum sequi voluptatum in veniam rerum magni nisi qui iure voluptatem provident. Inventore, minus molestiae ut est asperiores voluptates repellendus quos atque fugiat dolores maxime unde eos odit adipisci corporis veritatis tenetur magnam saepe consequuntur beatae ipsam. Nulla quasi esse non dolore quaerat rerum odit sit officia commodi.
</div>
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile"><div class="panel">
<div class="panel-body">
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
<div class="row text-justify">
<h3>Tab2</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, doloremque, dolores, autem eum sequi voluptatum in veniam rerum magni nisi qui iure voluptatem provident. Inventore, minus molestiae ut est asperiores voluptates repellendus quos atque fugiat dolores maxime unde eos odit adipisci corporis veritatis tenetur magnam saepe consequuntur beatae ipsam. Nulla quasi esse non dolore quaerat rerum odit sit officia commodi.
</div>
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
</div>
</div></div>
<div role="tabpanel" class="tab-pane fade" id="messages">
<div class="panel">
<div class="panel-body">
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
<div class="row text-justify">
<h3>Tab3</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, doloremque, dolores, autem eum sequi voluptatum in veniam rerum magni nisi qui iure voluptatem provident. Inventore, minus molestiae ut est asperiores voluptates repellendus quos atque fugiat dolores maxime unde eos odit adipisci corporis veritatis tenetur magnam saepe consequuntur beatae ipsam. Nulla quasi esse non dolore quaerat rerum odit sit officia commodi.
</div>
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
<div class="panel">
<div class="panel-body">
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
<div class="row text-justify">
<h3>Tab4</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, doloremque, dolores, autem eum sequi voluptatum in veniam rerum magni nisi qui iure voluptatem provident. Inventore, minus molestiae ut est asperiores voluptates repellendus quos atque fugiat dolores maxime unde eos odit adipisci corporis veritatis tenetur magnam saepe consequuntur beatae ipsam. Nulla quasi esse non dolore quaerat rerum odit sit officia commodi.
</div>
<div class="row">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div><!--/.tab-content -->
<div class="col-lg-6 col-sm-6 col-md-6">
<ul class="nav " role="tablist">
<div class="row bottom">
<div class="col-md-6 col-sm-6 col-lg-6">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">
<figure class="fader-home">
<img src="http://placehold.it/300/000.png" alt="" class="img-responsive ">
<figcaption class="fader-in">Aussteller1</figcaption>
</figure>
</a></li>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab"><img src="http://placehold.it/300/000.png" alt="" class="img-responsive"></a></li>
</div>
</div>
<div class="row top">
<div class="col-md-6 col-sm-6 col-lg-6">
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab"><img src="http://placehold.it/300/000.png" alt="" class="img-responsive"></a></li>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab"><img src="http://placehold.it/300/000.png" alt="" class="img-responsive"></a></li>
</div>
</div>
</ul>
</div><!-- /.tab-list -->
</div><!-- /.tab-pane#aussteller -->
</div><!-- /.meta-tab -->
</div><!-- /.row -->
</div>
.bottom{margin-bottom:1em;}
.top{margin-top:1em;}
.fader-home{
position:relative
transition:all 1s ease;
}
.fader-in{
position:absolute;
display:inline-block;
bottom:1em;
background:rgba(255,0,0,.8);
transition:all 1s ease;
opacity:0;
padding:2em;
width:90%;
}
img:hover+.fader-in{
opacity:1;
}
