Grayscale to True Color : Fixed

by Ken Watanabe

HTML

<!-- -- -- LEFT SIDE -- -- -->
<aside class="half left">
    <section class="reform" style="right: 5%; top: 5%;">
        <img width="200px" src="http://reform.lt/data/images/2013/01/tumblr-mggblgyswc1qabyt1o1-500.jpg" alt="Selected Image" title="Image Title" /> <span class="caption label"><span class="parenthesis">(</span>A—C<span class="parenthesis">)</span></span> <span class="caption">
                <p>XYZ</p>
                <p>XYZ</p>
            </span>

    </section>
    <section class="reform" style="left: 5%; bottom: 10%;">
        <img width="300px" src="http://images.tate.org.uk/sites/default/files/styles/grid-normal-8-cols/public/images/markg_gerhardr_nicks.jpg?itok=D7g05qpV" alt="Selected Image" title="Image Title" /> <span class="caption label"><span class="parenthesis">(</span>B—C<span class="parenthesis">)</span></span> <span class="caption">
                <p>XYZ</p>
                <p>XYZ</p>
            </span>

    </section>
</aside>
<!-- RIGHT SIDE -->
<aside class="half right">
    <section class="reform" style="right: 5%; bottom: 20%;">
        <img width="300px" src="http://reform.lt/data/images/2014/09/d4991784x.jpg" alt="Selected Image" title="Image Title" /> <span class="caption label"><span class="parenthesis">(</span>C—C<span class="parenthesis">)</span></span> <span class="caption">
            <p>XYZ</p>
            <p>XYZ</p>
        </span>

    </section>
</aside>

CSS

/* PRIMARY */
 aside.half {
    position: relative;
    width: 50%;
    height: 100%;
}
aside.half.left {
    float: left;
}
aside.half.right {
    float: right;
}
section.reform {
    display: block;
    position: absolute;
    text-align: center;
}
section.reform 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-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    cursor: pointer;
    max-width: 100%;
    height: auto;
}
section.reform: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.reform span.caption {
    display: none;
    position: absolute;
    text-align: center;
    padding-top: 25px;
    width: 100%;
    height: auto;
}
section.reform:hover span.caption {
    display: block;
}
section.reform span.caption p {
    font: 11px/15px'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    margin: 0;
    padding: 0;
}
section.reform span.caption p + p {
    color: #999999;
}
section.reform span.caption.label {
    display: block;
    font-size: 23px;
    font-family:'Phenotype S', times;
}
section.reform:hover span.caption.label {
    display: none;
}
.parenthesis {
    font: 19px/0'American Typewriter', 'Andale Mono', Courier New, Courier;
    font-weight: 100;
    display: inline-block;
    vertical-align: 2.9px;
    padding: 0 5px 0 7px;
}
/* SECONDARY */
 html, body {
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    font: 100%;
    color: #212121;
}