Programação (CSS)

/* Programação */
#programacao {
  background-color: #fffaf3; }

.proximo { overflow: hidden; }

.proximo .jogo {
  height: 320px;
  background-color: #fef2e0; }

.proximo .jogo img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 206px; }

@media (max-width: 991px) {
  .proximo .jogo img { height: 155px; }
}

.proximo .info,
.proximo .info .cover,
.proximo .info .hover,
.partidas .info,
.partidas .info .cover,
.partidas .info .hover {
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;  }

.verticalCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: auto; }

.proximo .info {
  height: 320px;
  background-image: #80b053;
  background-image: -webkit-linear-gradient(right, #7cab51 50%, #83b455 50%);
  background-image: -moz-linear-gradient(right, #7cab51 50%, #83b455 50%);
  background-image: -o-linear-gradient(right, #7cab51 50%, #83b455 50%);
  background-image: -ms-linear-gradient(right, #7cab51 50%, #83b455 50%);
  background-image: linear-gradient(right, #7cab51 50%, #83b455 50%); }

.proximo .info b,
.partidas .info b {
  display: block;
  line-height: 1; }

/* Cover da próxima partida */
.proximo .info .cover b:first-child {
  margin-bottom: 12px;
  font-size: 180px;
  line-height: 135px; }

.proximo .info .cover b:nth-child(2) {
  margin-bottom: 10px;
  letter-spacing: 7px;
  font-weight: 400;
  font-size: 36px; }

.proximo .info .cover b:nth-child(3) {
  text-transform: none;
  font-weight: 400;
  font-size: 30px; }

/* Hover da próxima partida */
.proximo .info .hover {
  padding: 0 25px; }

.proximo .info .hover b {
  margin-bottom: 14px;
  font-weight: 700; }

.proximo .info .hover b:first-child {
  font-size: 26px;
  line-height: 1.2; }

.proximo .info .hover b:nth-child(2) { font-size: 22px; }

.proximo .info .hover a.btn {
  padding: 8px 12px;
  border-radius: 0;
  background-color: #fff;
  color: #83B455;
  font-size: 16px;
  line-height: 1; }

/* Próximas partidas */
.partidas .info {
  height: 200px;
  background-image: #0c3d6e;
  background-image: -webkit-linear-gradient(right, #0b3b6b 50%, #0c3e71 50%);
  background-image: -moz-linear-gradient(right, #0b3b6b 50%, #0c3e71 50%);
  background-image: -o-linear-gradient(right, #0b3b6b 50%, #0c3e71 50%);
  background-image: -ms-linear-gradient(right, #0b3b6b 50%, #0c3e71 50%);
  background-image: linear-gradient(right, #0b3b6b 50%, #0c3e71 50%); }

.partidas .info:nth-child(odd) {
  background-image: #435f90;
  background-image: -webkit-linear-gradient(right, #415c8c 50%, #446194 50%);
  background-image: -moz-linear-gradient(right, #415c8c 50%, #446194 50%);
  background-image: -o-linear-gradient(right, #415c8c 50%, #446194 50%);
  background-image: -ms-linear-gradient(right, #415c8c 50%, #446194 50%);
  background-image: linear-gradient(right, #415c8c 50%, #446194 50%); }

/* Cover das próximas partidas */
.partidas .info .cover { padding: 0 10px; }

.partidas .info b {
  display: block;
  margin-bottom: 12px;
  font-weight: 700; }

.partidas .info .cover b:first-child {
  margin-bottom: 7px;
  font-size: 80px; }

.partidas .info .cover b:nth-child(2) {
  margin-bottom: 0;
  font-size: 14px; }

/* Hover das próximas partidas */
.partidas .info .hover { padding: 0 10px; }

.partidas .info .hover b:first-child {
  font-size: 20px;
  line-height: 1.2; }

.partidas .info .hover b:nth-child(2) { font-size: 16px; }

.partidas .info .hover a.btn {
  padding: 8px 10px;
  border-radius: 0;
  background-color: #fff;
  color: #0B3B6B;
  font-size: 13px;
  line-height: 1; }

a.plus {
  display: block;
  margin-top: 12px;
  height: 28px;
  color: #fff;
  font-size: 28px; }

/* Transição de cover para hover nas tiles */
.proximo .info .cover,
.proximo .info .hover {
  display: block;
  height: 320px; }

.partidas .info .cover,
.partidas .info .hover {
  display: block;
  height: 200px; }

.proximo .info .cover,
.proximo .info .hover,
.partidas .info .cover,
.partidas .info .hover {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease; }

.proximo .info .hover,
.partidas .info .hover {
  position: absolute;
  top: -100%;
  right: 0;
  bottom: 0;
  left: 0; }

.proximo .info:hover .cover,
.proximo .info:hover .hover,
.partidas .info:hover .cover,
.partidas .info:hover .hover {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%); }

Programação (HTML)

<!-- Programação -->
<section id="programacao">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="proximo">
          <div class="col-md-8 col-sm-7 col-xs-7 jogo">
            <img src="assets/img/partidas/jogo.png">
          </div><!--/.col-md-8 -->
          <div class="col-md-4 col-sm-5 col-xs-5 w-padding-left w-padding-right">
            <div class="info">
              <div class="cover">
                <div>
                  <b>13</b>
                  <b>junho</b>
                  <b>13h</b>
                  <a href="#" class="plus"><i class="fa fa-plus-circle"></i></a>
                </div>
              </div><!--/.cover -->
              <div class="hover">
                <div>
                  <b>Cavaleiros do Forró</b>
                  <b>14h às 15:30h</b>
                  <a href="#comochegar" class="btn">Como chegar</a>
                </div>
              </div><!--/.hover -->
            </div><!--/.info -->
          </div><!--/.col-xs-4 -->
        </div><!--/.proximo -->
        <div class="clearfix"></div>
        <div class="partidas">
          <div class="col-xs-3 w-padding-left w-padding-right info">
            <div class="cover">
              <div>
                <b>13</b>
                <b>Brasil x EUA</b>
                <a href="#" class="plus"><i class="fa fa-plus-circle"></i></a>
              </div>
            </div><!--/.cover -->
            <div class="hover">
              <div>
                <b>Araketu</b>
                <b>14h às 15:30h</b>
                <a href="#comochegar" class="btn">Como chegar</a>
              </div>
            </div><!--/.hover -->
          </div><!--/.info -->
          <div class="col-xs-3 w-padding-left w-padding-right info">
            <div class="cover">
              <div>
                <b>13</b>
                <b>Brasil x Itália</b>
                <a href="#" class="plus"><i class="fa fa-plus-circle"></i></a>
              </div>
            </div><!--/.cover -->
            <div class="hover">
              <div>
                <b>Marina Elali</b>
                <b>14h às 15:30h</b>
                <a href="#comochegar" class="btn">Como chegar</a>
              </div>
            </div><!--/.hover -->
          </div><!--/.info -->
          <div class="col-xs-3 w-padding-left w-padding-right info">
            <div class="cover">
              <div>
                <b>14</b>
                <b>Alemanha x Holanda</b>
                <a href="#" class="plus"><i class="fa fa-plus-circle"></i></a>
              </div>
            </div><!--/.cover -->
            <div class="hover">
              <div>
                <b>Cavaleiros do Forró</b>
                <b>14h às 15:30h</b>
                <a href="#comochegar" class="btn">Como chegar</a>
              </div>
            </div><!--/.hover -->
          </div><!--/.info -->
          <div class="col-xs-3 w-padding-left w-padding-right info">
            <div class="cover">
              <div>
                <b>14</b>
                <b>Inglaterra x Uruguai</b>
                <a href="#" class="plus"><i class="fa fa-plus-circle"></i></a>
              </div>
            </div><!--/.cover -->
            <div class="hover">
              <div>
                <b>Olodum</b>
                <b>14h às 15:30h</b>
                <a href="#comochegar" class="btn">Como chegar</a>
              </div>
            </div><!--/.hover -->
          </div><!--/.info -->
        </div><!--/.partidas -->
      </div><!--/.col-xs-11 -->
    </div><!--/.row -->
  </div><!--/.container -->
</section><!--/#programacao -->

Programação (JavaScript)

$('.cover > div').each(function() {
  $(this).css( 'height', $(this).innerHeight() );
  $(this).addClass('verticalCenter');
});

$('.hover > div').each(function() {
  $(this).css( 'height', $(this).innerHeight() );
  $(this).addClass('verticalCenter');
});