Bootstrap Snippet Slide Show Accordian using HTML CSS

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="accordian">
  <ul>
    <li>
      <div class="image_title">
        <a href="#">Wedding 1</a>
      </div>
      <a href="#">
     <img src="http://farm3.staticflickr.com/2812/10121061143_e05f1619d7.jpg">
            </a>
    </li>
       <li>
      <div class="image_title">
        <a href="#">Wedding 2</a>
      </div>
      <a href="#">
     <img src="http://farm8.staticflickr.com/7435/10067483716_2b6a593ca8.jpg">
            </a>
    </li>
          <li>
      <div class="image_title">
        <a href="#">Wedding 3</a>
      </div>
      <a href="#">
     <img src="http://farm8.staticflickr.com/7310/10065811936_8debcccb71.jpg">
            </a>
    </li>
             <li>
      <div class="image_title">
        <a href="#">Wedding 4</a>
      </div>
      <a href="#">
     <img src="http://farm4.staticflickr.com/3715/10065692306_705364fa01.jpg">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
*{
  margin:0;
  padding:0;
}
body{
  background:#ccc;
  font-family: arial,verdana,tahoma;
}
/*
Width of image : 500;
Width of hovered image: 500
Width of unhovered image: 25x;
Width of container : 500 + 50*4 = 700px;
Default 700/5 : 140px;
*/
.accordian{
  width: 705px;
  height: 333px;
  overflow:hidden;
  
  margin: 100px auto;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0px 8px 6px -6px black;
}
.accordian ul{
  
}
.accordian li{
  position: relative;
  display:block;
  width:140px;
  float: left;
  
  border-left: 1px solid #888;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slide Show Accordian"
Bootstrap 3.3.0 Snippet by ravi7284007

Related: See More

Questions / Comments:

"Slide Show Accordian" Bootstrap 3.3.0 Snippet by ravi7284007

Related: See More

Questions / Comments:

"Slide Show Accordian"
Bootstrap 3.3.0 Snippet by ravi7284007