Movie Template

A template for play with jQuery

by rlinares

HTML

<div class="movies">
    <ol>
        <form>
        <li class="movie-list">
            <div class="cover">
                <a  title="Bridesmaids"><img src="http://cps-static.rovicorp.com/2/Open/CinemaSource/Bridesmaids/_derived_png24_120x82_m0/106630r1.png?partner=allrovi.com" alt="Bridesmaids" width="50"></a>
                <a  data-objectid="V   514441" class="play-movie play-overlay sm" title="Watch trailer for &quot;Bridesmaids&quot;"></a>
            </div>
            <div class="info">
                <a  class="title" title="Bridesmaids">Bridesmaids</a>
                <p>                             <a >Paul Feig</a>                                                   </p>
                <p class="genre">                         <a >Romantic Comedy</a>,                                                 <a >Farce</a>                                           </p>
                
            </div>
    <input type="checkbox" name="newsletter" checked="checked">
        </li>
        <hr>
        <li class="movie-list">
            <div class="cover">
                <a  title="Lovers"><img src="http://cps-static.rovicorp.com/1/adg/cov60/drv200/v241/v24119tipp2.jpg?partner=allrovi.com" alt="Lovers" width="50"></a>
                <a  data-objectid="V    78936" class="play-movie play-overlay sm" title="Watch trailer for &quot;Lovers&quot;" style="display: none; "></a>
            </div>
            <div class="info">
                <a  class="title" title="Lovers">Lovers</a>
                <p>                             <a >Vicente Aranda</a>                                                   </p>
                <p class="genre">                         <a >Erotic Drama</a>                                           </p>
    <input type="checkbox" name="newsletter">
            </div>
        </li>
        <hr>
        <li class="movie-list">
            <div class="cover">
                <a  title="Bride Flight"><img...

CSS

.movie-list:hover{
            position:relative;
            border:White 7px solid;
            opacity:0.4;
            filter:alpha(opacity=40);
            position:relative;
            }

.movies{
        background:Teal;
}

JavaScript

function countChecked() {
  var n = $("input:checked").length;
     $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}

//countChecked();
//$(":checkbox").click(countChecked);