<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 ---------->
<article class="panel-group">
<!-- tablist -->
<div class="col-md-4 col-md-offset-4" style="padding-left:0;">
<div role="tablist" class="visible-xs black-no-height">
<header class="panel-heading top">
<h1 class="text-center top">Header</h1>
<small class="muted">Lorem Ipsum Dolor</small>
</header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#ausl1" aria-controls="home" role="tab" data-toggle="tab">Ausl</a></li>
<li role="presentation"><a href="#ausl2" aria-controls="profile" role="tab" data-toggle="tab">Aus</a></li>
<li role="presentation"><a href="#ausl3" aria-controls="messages" role="tab" data-toggle="tab">Aus</a></li>
<li role="presentation"><a href="#ausl4" aria-controls="settings" role="tab" data-toggle="tab">Aus</a></li>
</ul>
</div>
<div class="tab-content ">
<div role="tabpanel" class="tab-pane fade white active in" id="ausl1">
<div class="panel">
<div class="panel-body ">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block " style="margin-top:4em;">
<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.
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade white" id="ausl2">
<div class="panel">
<div class="panel-body ">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block " style="margin-top:4em;">
<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.
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade white" id="ausl3">
<div class="panel">
<div class="panel-body ">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block " style="margin-top:4em;">
<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.
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade white" id="ausl4">
<div class="panel">
<div class="panel-body ">
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block " style="margin-top:4em;">
<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.
<img src="http://placehold.it/400x200/000.png" alt="" class="img-responsive center-block">
</div>
</div>
</div>
</div><!--/.tab-content -->
</div><!--/.col-lg-5 col-lg-offset-7 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8 -->
<div class="col-md-4 black hidden-xs"><!-- tablist -->
<header class="panel-heading top">
<h1 class="text-center top">Header</h1>
<small class="muted">Lorem Ipsum Dolor</small>
</header>
<div class="nav top " role="tablist">
<div class="row bottom">
<div class="col-md-6 col-sm-6 col-lg-6">
<a href="#ausl1" 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>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<a href="#ausl2" role="tab" data-toggle="tab">
<img src="http://placehold.it/300/000.png" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="row top">
<div class="col-md-6 col-sm-6 col-lg-6">
<a href="#ausl3" role="tab" data-toggle="tab"><img src="http://placehold.it/300/000.png" alt="" class="img-responsive"></a>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<a href="#ausl4" role="tab" data-toggle="tab">
<img src="http://placehold.it/300/000.png" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
<!--./tablist -->
</article><!--/.article -->
.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;
}
