Grayscale Image + Title (hover over) Color Image + Detail

HTML

<section class="image">

        <li>
            <img width="80%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e1305c3e3c262a000631/img_col_main/3.-Nov.-2008.jpg?1360323002" class="attachment-full" alt="selected_image" title="selected_image" /> 
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
        <li>
            <img width="30%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e1375c3e3c262a000632/img_col_main/6.-Nov.-08.jpg?1360323004" class="attachment-full" alt="selected_image" title="selected_image" />
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
        <li>
            <img width="70%" height="100%" src="http://asset2.itsnicethat.com/system/files/022013/5114e13a5c3e3c22a3000bdf/img_col_main/10.-Nov.-08-(reverse).jpg?1360323005" class="attachment-full" alt="selected_image" title="selected_image" />
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
        <li>
            <img width="90%" height="100%" src="http://asset1.itsnicethat.com/system/files/022013/5114e13d5c3e3c22a3000bfc/img_col_main/10.-Nov.-08.jpg?1360323006" class="attachment-full" alt="selected_image" title="selected_image" /> 
            <span class="caption label">Title</span>
            <span class="caption">Subtext<br/>Detail</span>
        </li>
</section>

CSS

body {
    width: 40%;
    height: 100%;
    margin: 0 auto;
    font: 100%;
    color: #222222;
}

section.image ul {
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 5% 0 0 0;
    width: 100%;
}
section.image li {
    display: block;
    list-style-type: none;
    list-style-image: none;
    text-align: center;
    padding-bottom: 100px;
    position: relative;
}
section.image li img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1) brightness(0.9);
    -moz-filter: grayscale(1) brightness(0.9);
    -o-filter: grayscale(1) brightness(0.9);
    -ms-filter: grayscale(1) brightness(0.9);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    max-width: 100%;
    height: auto;
}
section.image li:hover img {
    filter: grayscale(0.1) brightness(1);
    -webkit-filter: grayscale(0.1) brightness(1);
    -moz-filter: grayscale(0.1) brightness(1);
    -o-filter: grayscale(0.1) brightness(1);
    -ms-filter: grayscale(0.1) brightness(1);
}
section.image li span.caption {
    display: none;
    position: absolute;
    text-align: center;
    padding-top: 18px;
    width: 100%;
    height: auto;
}
section.image li:hover span.caption {
    display: block;
}
section.image li span.caption.label {
    display: block;
    font-size: 23px;
    padding-top: 23px;
    font-family:'Phenotype S', times;
}
section.image li:hover span.caption.label {
    display: none;
}