Untitled

<div id="advent-calendar">

  <ul class="days">

    <li class="day"><a href="#"><span>1</span></a></li>

    <li class="day"><a href="#"><span>2</span></a></li>

    <li class="day"><a href="#"><span>3</span></a></li>

    <li class="day"><a href="#"><span>4</span></a></li>

    <li class="day"><a href="#"><span>5</span></a></li>

    <li class="day"><a href="#"><span>6</span></a></li>

    <li class="day"><a href="#"><span>7</span></a></li>

    <li class="day"><a href="#"><span>8</span></a></li>

    <li class="day"><a href="#"><span>9</span></a></li>

    <li class="day"><a href="#"><span>10</span></a></li>

    <li class="day"><a href="#"><span>11</span></a></li>

    <li class="day"><a href="#"><span>12</span></a></li>

    <li class="day"><a href="#"><span>13</span></a></li>

    <li class="day"><a href="#"><span>14</span></a></li>

    <li class="day"><a href="#"><span>15</span></a></li>

    <li class="day"><a href="#"><span>16</span></a></li>

    <li class="day"><a href="#"><span>17</span></a></li>

    <li class="day"><a href="#"><span>18</span></a></li>

    <li class="day"><a href="#"><span>19</span></a></li>

    <li class="day"><a href="#"><span>20</span></a></li>

    <li class="day"><a href="#"><span>21</span></a></li>

    <li class="day"><a href="#"><span>22</span></a></li>

    <li class="day"><a href="#"><span>23</span></a></li>

    <li class="day"><a href="#"><span>24</span></a></li>

  </ul>

</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

body {

  background-image: url(http://i.imgur.com/aq7UK.png);

  background-repeat: no-repeat;

  background-position: fixed;

  background-size: cover; 

}

#advent-calendar {

  margin: 50px auto;

  width: 160*6px;

  ul.days {

    list-style: none;

    margin: 0;

    padding: 0;

    .day {

      display: block;

      float: left;

      a {

        @include box-sizing(border-box);

        @include box-shadow(0px 1px 3px #666);

        background-size: cover;

        border: 2px #fff solid;

        display: block;

        position: relative;

        width: 150px;

        height: 130px;

        margin: 5px;

        span {

          @include transition-property("background-color");

          @include transition-duration("1s, 1s");

          background-color: rgba(#000, 0.5);

          color: #fff;

          font-weight: bold;

          font-size: 40px;

          text-shadow: 1px 1px 1px #000;

          -webkit-font-smoothing: antialiased;

          position: absolute;

          width: 100%;

          height: 100%;

          display: block;

          line-height: 130px;

          text-align: center;

        }

      }

    }

  }

}

calendar = $ '#advent-calendar'

days = $ '.days li', calendar

days.bind 'mouseover', (e) ->

  ($ 'span', this).css('background-color', 'transparent');

days.bind 'mouseleave', (e) ->

  ($ 'span', this).css('background-color', 'rgba(0,0,0,.5)');