Panels Bootstrap

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Galnova's Character Legend</h1>

<div class="panel-group" id="accordion">

  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        <span class="panel-title">

          Gods V. Men
<!--        <p class="tupper">
       This is introductory content
       </p> -->
      </span>
      </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">
          <div class="grip_hang_topp"></div>
          <div class="col-xs-12 grip">
            <a class="fancybox zero" rel="gallery1" href="../A16/m_chalstolce.jpg" title="GVM Chalstolce">
              <img src="http://galnova.com/A16/s_chalstolce.jpg" alt="GVM Chalstolce" title="GVM Chalstolce" />
            </a>
            <div>Chastolce Macabre</div>
          </div>
          <div class="grip_hang_bott"></div>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">
          <div class="grip_hang_topp"></div>
          <div class="col-xs-12 grip">
            <a class="fancybox zero" rel="gallery1" href="../A16/m_delila.jpg" title="GVM Delila">
              <img src="http://galnova.com/A16/s_delila.jpg" alt="GVM Delila" title="GVM Delila" />
            </a>
            <div>Delila Gida</div>
          </div>
          <div class="grip_hang_bott"></div>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">
          <div class="grip_hang_topp"></div>
          <div class="col-xs-12 grip">
            <a class="fancybox zero" rel="gallery1" href="../A16/m_sam.jpg" title="GVM Sam">
              <img src="http://galnova.com/A16/s_sam.jpg"...

CSS

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  padding: 8px;
}

h1 {
  font-size: 28px;
  margin-bottom: 10px;
  padding: 8px;
}

h2 {
  /* border-top: dotted 2px blue; */
  font-size: 24px;
  padding-top: 8px;
  margin-bottom: 4px;
  margin-top: 8px;
}

.tupper {
  /* border-bottom: solid 2px blue; */
  padding: 0;
  padding-bottom: 8px;
  margin: 0;
}

.main_wrap {
  padding-bottom: 0;
  border-bottom: solid 2px blue;
  margin-bottom: 10px;
}

.grip_wrap:after {
  content: '';
  position: absolute;
  z-index: 1;
  display: block;
  width: 50px;
  height: 5px;
  background: blue;
  top: 50%;
  right: 0;
}

.grip_wrap:before {
  content: '';
  position: absolute;
  z-index: 1;
  display: block;
  width: 50px;
  height: 5px;
  background: blue;
  top: 50%;
  left: 0;
}


/* .grip_wrap:first-child:before { display: none; }
.grip_wrap:last-child:after { display: none; } */


/* .grip_wrap:nth-child(4n+4):after { display: none; } */


/* .grip_wrap:nth-child(5):before,
.grip_wrap:nth-child(9):before,
.grip_wrap:nth-child(13):before
{ display: none; } */


/* .grip_wrap:before > .grip:hover, .grip_wrap:after > .grip:hover { } */

.grip {
  /* opacity: .5; */
  position: relative;
  z-index: 2;
  min-width: 150px;
  background: #fff;
  padding: 10px;
  border: solid 2px blue;
  border-radius: 10px;
  /* overflow: hidden; */
  -webkit-box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 0px 18px -5px rgba(0, 0, 0, 1);
  box-shadow: 0px 0px 18px -5px rgba(0, 0, 0,...