Movie Posters

by Oliver Kelso

HTML

<link rel="stylesheet" href="http://pixelsoul.com/css/reset.css">
<div id="movies">
    <ul>
        <li>
            <p class="movie-date circle current-date">Feb<span>12</span>

            </p>
            <ul class="movie-list show-movies">
                <li> <a href="#"><span class="movie-details"><p>More Details</p></span><img src="http://i.imgur.com/GbfoCbC.jpg" class="movie-poster" /></a>

                    <p class="movie-title">The Dark Knight</p>
                    <p class="movie-time">12:00pm</p>
                </li>
                <li> <a href="#"><span class="movie-details"><p>More Details</p></span><img src="http://imgur.com/JPmNIaQ.jpg" class="movie-poster" /></a>

                    <p class="movie-title">Anchorman</p>
                    <p class="movie-time">01:00pm</p>
                </li>
                <li> <a href="#"><span class="movie-details"><p>More Details</p></span><img src="http://imgur.com/YPk968H.jpg" class="movie-poster" /></a>

                    <p class="movie-title">Avatar</p>
                    <p class="movie-time">02:30pm</p>
                </li>
                <li> <a href="#"><span class="movie-details"><p>More Details</p></span><img src="http://i.imgur.com/XrD5R8a.jpg" class="movie-poster" /></a>

                    <p class="movie-title">The Wolverine 3D</p>
                    <p class="movie-time">02:30pm</p>
                </li>
                <li> <a href="#"><span class="movie-details"><p>More Details</p></span><img src="http://i.imgur.com/FlGhyzC.jpg" class="movie-poster" /></a>

                    <p class="movie-title">Zombieland</p>
                    <p class="movie-time">04:20pm</p>
                </li>
            </ul>
        </li>
        <li>
            <p class="movie-date circle">April<span>22</span>

            </p>
            <ul class="movie-list hide-movies">
                <li> <a href="#"><span class="movie-details"><p>More Details</p></span><img...

CSS

#movies {
    font-family:helvetica
}
#movies ul {
}
#movies ul li {
    display:block;
    float:left;
}
#movies ul .movie-date {
    cursor:pointer;
    padding:10px;
    background:#111;
    color:#FFF;
    width:40px;
    height:40px;
    text-align:center;
    text-transform:uppercase;
    margin:5px 2px 5px 2px;
}
#movies ul .movie-date span {
    clear:both;
    display:block;
    text-align:center;
    font-weight:bold;
    font-size:19px;
}
#movies ul li ul.movie-list {
    position:absolute;
    left:0px;
}
#movies ul li ul.movie-list li {
    padding:5px;
    width:200px;
    height:275px;
    border:solid 1px #CCC;
    margin:0 5px 0 0;
    display:block;
    float:left;
}
#movies ul li ul.movie-list li a span {
    position:absolute;
    z-index:3;
    background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6nwYAAm0BaIe3/WsAAAAASUVORK5CYII=);
    display:none;
    color:#FFF;
    width:200px;
    height:275px;
    text-align:center;
    font-weight:bold;
}
#movies ul li ul.movie-list li a span p {
    display:none;
    background:#FFF;
    color:#333;
    position:relative;
    margin:0 0 0 0;
    padding:10px 0 10px 0;
}
#movies ul li ul.movie-list li a img {
    width:100%;
    height:100%;
}
#movies ul li ul.movie-list li .movie-title {
    text-align:center;
    line-height:35px;
    font-weight:bold;
}
#movies ul li ul.movie-list li .movie-time {
    text-align:center;
    line-height:25px;
    font-size:12px;
}
.current-date {
    color:#FFF !important;
    background:green !important;
}
.hide-movies {
    display:none;
}
.show-movies {
    display:block;
}
.clear {
    clear:both;
}
.circle {
    border-radius: 50%;
}

JavaScript

$(document).ready(function () {

    
    var movies = [
        {"name": "Fake Movie", "poster": "http://fakeimg.com/test.jpg", "date": "01-01-2014", "time" : "1:00pm - 2:30pm"},
        {"name": "Fake Movie2", "poster": "http://fakeimg.com/test2.jpg", "date": "01-01-2014", "time" : "2:40pm - 4:30pm"},
        {"name": "Fake Movie3", "poster": "http://fakeimg.com/test3.jpg", "date": "01-01-2014", "time" : "4:45pm - 7:30pm"},
    ];


    $("#movies .movie-date").on("click", function () {

        if (!$(this).hasClass('current-date')) {
            $("#movies .movie-date").stop(true,true).removeClass('current-date');
            $("#movies .movie-list").stop(true,true).removeClass("show-movies").fadeOut().addClass("hide-movies");

            $(this).stop().addClass('current-date');
            $(this).next(".movie-list").stop().fadeIn("fast").addClass('show-movies');
        }
    });


    $("#movies .movie-list a").on("mouseenter", function () {

        $(this).children(".movie-details").stop().fadeIn(150),
        $(this).children(".movie-details").children("p").stop(true, true).slideDown(200);

    }).on("mouseleave", function () {

        $(this).children(".movie-details").stop().fadeOut(500),
        $(this).children(".movie-details").children("p").stop(true, true).fadeOut(100);

    });


});