html - CSS を使用してスプライト画像のサイズを動的に変更する

Question

ブラウザウィンドウを小さく/大きくすると、次のページの左側の画像が右側の画像のようにサイズ変更されるようにしようとしています:

http://www.hugoproject.com/test.html

左の画像にはスプライトを使用しています。私のコードは次のとおりです。

HTML

<div id="home-projects">
<div id="projects">
    <div class="project-group">
    <div class="project">
     <a href="#" class="HS" class="project-link">Arrow<span></span></a>

                                    </div>
</div>
</div>

CSS

#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}     

 #projects {
    width: 100%;
}

.project-group {
width: 100%;
height: 100%;
position: absolute;
}
    .project {
        float: left;
        text-align: center;
  width: 33.3%;

}
    .project-link {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #adadad;
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 80%;
    }
    .circle .project-link, .circle .project-link .hover {
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
    }
    .project-link .hexagon-top {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        border-style: solid;
        border-bottom-color: transparent;
        border-left-color: #dfdfdf;
        border-right-color: #dfdfdf;
        width: 0;
        height: 0;
        z-index: 2;
    }
    .project-link .hexagon-bottom {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-style: solid;
        border-top-color: transparent;
        border-left-color: #dfdfdf;
        border-right-color: #dfdfdf;
        width: 0;
        height: 0;
        z-index: 2;
    }
        .project-link .hover {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 14px;
            text-align: center;
            color: #fff;
            background: #ec6136;
            text-decoration: none;
            text-transform: uppercase;
            display: block;
            opacity: 0;
            transition: all .3s;
            -moz-transition: all .3s;
            -webkit-transitin: all .3s;
        }
            .project-link .hover-text {
                display: block;
                margin-top: 45%;
            }
            .project-link .hover-text:after {
                content: '>';
                font-family: 'icon';
                font-size: 12px;
                margin-left: 15px;
            }
        .project-link:hover > .hover {
            opacity: .9;
        }

.HS {
display: inline-block;
position: relative;
text-indent: -9999px;
    width: 283px;
height: 213px;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
}

.HS span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.hugoproject.com/ftp1/images/icons.png) no-repeat;
background-position: 0 -214px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition:    opacity 0.5s;
-o-transition:      opacity 0.5s;
}
.HS:hover span {
opacity: 1;
}

私は何を間違っていますか？