"Double Tab With Pics"
Bootstrap 3.2.0 Snippet by Marnoweb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: