CodePen Embed - Tickets Concept

<body>
  <div class="wrapper">
    <div class="container">
      <h2 class="page-title">Tickets Concept</h2>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="ticket-card">
            <div class="cover">
              <img src="https://s28.postimg.org/p916fev0t/week.jpg" alt="" />
              <div class="info">
                <div class="going">
                  <i class="fa fa-group"></i> 4,234 Going
                </div>
                <div class="tickets-left">
                  <i class="fa fa-ticket"></i> 240 Tickets Left
                </div>
              </div>
            </div>
            <div class="body">
              
              <div class="artist">
                <h6 class="info">Global Tour 2016</h6>
                <h4 class="name">The Weeknd</h4>
              </div>
              <div class="price">
                <div class="from">From</div>
                <div class="value">
                  <b>$</b>599
                </div>
              </div>
              
              <div class="clearfix"></div>
              <div class="info">
                <p class="location">
                  <i class="fa fa-map-marker"></i> Barcelona, Spain
                </p>
                <p class="date">
                  <i class="fa fa-calendar"></i> 30 Aug, 2016
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="collapse">
              <ul class="list-unstyled">
                <li>
                  <div class="ticket">
                    <h5>Basic Ticket<br>
                      <small>25 Tickets left</small>
                    </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>599</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>Regular Ticket<br>
                    <small>15 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>799</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>Premium Ticket<br>
                    <small>62 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>1,299</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>VIP Ticket<br>
                    <small>6 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>1,799</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
              </ul>
            </div>
            <div class="footer">
              <button class="btn toggle-tickets">Show Tickets</button>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="ticket-card active">
            <div class="cover">
              <img src="https://s28.postimg.org/iu25iqob1/kanye.jpg" alt="" />
              <div class="info">
                <div class="going">
                  <i class="fa fa-group"></i> 4,234 Going
                </div>
                <div class="tickets-left">
                  <i class="fa fa-ticket"></i> 240 Tickets Left
                </div>
              </div>
            </div>
            <div class="body">
              <div class="artist">
                <h6 class="info">Yeezus Worldwide</h6>
                <h4 class="name">Kanye West</h4>
              </div>
              <div class="price">
                <div class="from">From</div>
                <div class="value">
                  <b>$</b>699
                </div>
              </div>
              <div class="clearfix"></div>
              <div class="info">
                <p class="location">
                  <i class="fa fa-map-marker"></i> Dallas, Texas
                </p>
                <p class="date">
                  <i class="fa fa-calendar"></i> 30 Aug, 2017
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="collapse in">
              <ul class="list-unstyled">
                <li>
                  <div class="ticket">
                    <h5>Basic Ticket<br>
                      <small>25 Tickets left</small>
                    </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>699</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>Regular Ticket<br>
                    <small>15 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>799</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>Premium Ticket<br>
                    <small>62 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>1,299</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>VIP Ticket<br>
                    <small>6 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>1,799</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
              </ul>
            </div>
            <div class="footer">
              <button class="btn toggle-tickets">Hide Tickets</button>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="ticket-card">
            <div class="cover">
              <img src="https://s28.postimg.org/wmgkedf2l/drake.jpg" alt="" />
              <div class="info">
                <div class="going">
                  <i class="fa fa-group"></i> 4,234 Going
                </div>
                <div class="tickets-left">
                  <i class="fa fa-ticket"></i> 240 Tickets Left
                </div>
              </div>
            </div>
            <div class="body">
              <div class="artist">
                <h6 class="info">Trust Issues Tour</h6>
                <h4 class="name">Drake</h4>
              </div>
              <div class="price">
                <div class="from">From</div>
                <div class="value">
                  <b>$</b>499
                </div>
              </div>
              <div class="clearfix"></div>
              <div class="info">
                <p class="location">
                  <i class="fa fa-map-marker"></i> Paris, France
                </p>
                <p class="date">
                  <i class="fa fa-calendar"></i> 20 Aug, 2016
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="collapse">
              <ul class="list-unstyled">
                <li>
                  <div class="ticket">
                    <h5>Basic Ticket<br>
                      <small>25 Tickets left</small>
                    </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>499</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>Regular Ticket<br>
                    <small>15 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>799</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>Premium Ticket<br>
                    <small>62 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>1,299</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
                <li>
                  <div class="ticket">
                    <h5>VIP Ticket<br>
                    <small>6 Tickets left</small>
                  </h5>
                  </div>
                  <div class="price">
                    <div class="value"><b>$</b>1,799</div>
                  </div>
                  <a href="#" class="btn btn-info btn-sm btn-buy">Buy Now!</a>
                </li>
              </ul>
            </div>
            <div class="footer">
              <button class="btn toggle-tickets">Show Tickets</button>
            </div>
          </div>
        </div>


      </div>
    </div>

    <footer>
      <h3>Connect with me on:</h3>
      <a target="_blank" class="social-icon" href="https://twitter.com/axelut"><i class="fa fa-twitter"></i></a>
      <a target="_blank" class="social-icon" href="https://www.facebook.com/axelut"><i class="fa fa-facebook-square"></i></a>
      <a target="_blank" class="social-icon" href="https://dribbble.com/axelut"><i class="fa fa-dribbble"></i></a>
      <a target="_blank" class="social-icon" href="https://github.com/alexandru-paduraru"><i class="fa fa-github"></i></a>
      <a target="_blank" class="social-icon" href="https://www.reddit.com/user/alexpaduraru/"><i class="fa fa-reddit"></i></a>
    </footer>
  </div>

</body>

$border-radius-base: 4px;

$border-radius: $border-radius-base;
$border-radius-top: $border-radius-base $border-radius-base 0 0;

$padding-base: 15px;

@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}

@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}

@mixin transition($time){
  -webkit-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
    -moz-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
    -o-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
    -ms-transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
    transition: transform $time cubic-bezier(0.34, 2, 0.6, 1), box-shadow $time ease, opacity $time ease;
}

.page-title{
  text-align: center;
  color: #FFFFFF;
  font-weight: 100;
  font-size: 40px;
  margin-top: 60px;
  margin-bottom: 40px;
}
.wrapper{
  width: 100%;
  min-height: 930px;
  display: block;
  position: relative;
  background: #333333;
  background-image: url('https://images.unsplash.com/photo-1448485780098-7e0b78781fc1?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450');
  background-size: cover;
  background-position: center center;
  position: relative;
  padding-bottom: 50px;
  
  &:after{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111111;
    display: block;
    content: "";
    top:0;
    left:0;
    z-index:1;
    opacity: .6;
  }
  .container{
    z-index:2;
    position: relative;
  }
  footer{
    position: absolute;
    z-index: 3;
    bottom: 20px;
    width: 100%;
    text-align:center;
    
    h3{
      color: #FFFFFF;
      font-weight: 200;
    }
    .social-icon{
      color:#FFFFFF;
      opacity: 0.8;
      font-size: 34px;
      margin: 20px;
      
      &:hover{
        opacity: 1;
      }
    }
  }
}

.ticket-card{
  margin-top: 15vh;
  margin-bottom: 15vh;
  background: #FFFFFF;
  border-radius: $border-radius;
  
  &:hover,
  &.active{
    .cover{
      img{
        @include translate(0,-50px);
        box-shadow: 0 10px 20px -4px rgba(22,22,22,.5);
      }
    }
  }
  .cover{
    border-radius: $border-radius-top;
    position: relative;
    margin: 15px;
    
    img{
      width: 100%;
      position: relative;
      z-index: 2;
      margin-top: -30px;
      box-shadow: 0 10px 16px -6px rgba(22,22,22,.5);
      border-radius: $border-radius-base;
      
      @include translate(0,0);
      @include transition(300ms);
    }
    
    .info{
      position: absolute;
      width: 100%;
      bottom: 0px;
      padding: 0 $padding-base;
      color: #777777;
      
      .going,
      .tickets-left{
        padding-bottom: 10px;
        border-bottom: 1px solid #f3f3f3;
        width: 50%;
      }
      .going{
        float:left;       
      }
      .tickets-left{
        float:right;
        text-align: right;
      }
      .fa{
        color: #CCCCCC;
        margin-right: 5px;
      }
    }
  }
  
  .artist{
    float:left;
    
    .info{
        font-weigth: 600;
        font-size: 12px;
        text-transform: uppercase;
        color: #BBBBBB;
        margin-bottom: 0;
      }
      .name{
        font-weight: 200;
        font-size: 22px;
        margin-top: 5px;
      }
  }
  
  .ticket{
    float: left;
    
    small{
      font-size: 75%;
    }
  }
  .price{
    float: right;
    text-align: right;
    
    .from{
      color: #BBBBBB;
    }
    .value{
      font-size: 28px;
      font-weight: 200;
      color: #00bbff;
      margin-top: -5px;
      
      b{
        font-size: 18px;
        font-weight: 200;
        //vertical-align: top;
      }
    }
  }
  
   .list-unstyled{
      max-height: 200px;
      overflow-x: scroll;
      background: #EEEEEE;
      margin-bottom: 0;
      box-shadow: inset 0px 4px 10px rgba(0,0,0,0.25);
    
    li{
      border-bottom: 1px dotted #CCCCCC;
      padding: 5px $padding-base * 2;
      overflow: hidden;
      width: 100%;
      display:block;
      position: relative;
      
      .btn-buy{
        position: absolute;
        right: 15px;
        top: 13px;
        
        padding: 8px 20px;
        border-radius: 6px;
        background: #00bbff;
        border:0;
        opacity: 0;
        @include transition(300ms);
      }
      
      &:hover{
        .btn-buy{
          opacity: 1;
        }
      }
      &:last-child{
        border-bottom: none;
      }
      &:before,
      &:after{
        display: table;
        content: " ";
        clear: both;
      }
      
      .price{
        .value{
          color: #444444;
          font-size: 22px;
          margin-top: 10px;
        }
      }
    }
  }
  
  .body{
    padding: 5px $padding-base * 2;
    
    .info{
      color: #777777;
    }
    .location,
      .date{
        padding-top: 10px;
        //border-top: 1px solid #f3f3f3;
        width: 50%;
      }
      .location{
        float:left;       
      }
      .date{
        float:right;
        text-align: right;
      }
      .fa{
        color: #CCCCCC;
        margin-right: 5px;
      }
   }
  
  .footer{
    .btn{
      width: 100%;
      background: transparent;
      border-top: 1px dotted #BBBBBB;
      border-radius: 0;
      padding: 15px 8px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      color: #666666;
      box-shadow: none;
      
      &:focus,
      &:hover,
      &:active{
        outline: none !important;
      }
    }
  }
}

View Compiled

$('.toggle-tickets').click(function() {
  $tickets = $(this).parent().siblings('.collapse');
 
  if ($tickets.hasClass('in')) {
    $tickets.collapse('hide');
    $(this).html('Show Tickets');
    $(this).closest('.ticket-card').removeClass('active');
  } else {
    $tickets.collapse('show');
    $(this).html('Hide Tickets');
    $(this).closest('.ticket-card').addClass('active');
  }
});

Run Pen

This Pen is owned by Axelut Alex on CodePen.

See more by @axelut on CodePen

External CSS

External JavaScript