html - パーセンテージに基づいてサイズ変更された 2 つの画像が互いに重なる問題

Question

私が達成しようとしているのは、ホバーしたときに親指の色付きバージョンが表示される画像の親指のグリッドを作成することです。次のコードを使用してそれを達成しましたが、正確な正方形の画像でのみ機能します。1:1 の比率。長方形の画像が使用されている場合、すべての地獄が解き放たれます。もちろん、margin-top ピクセル値を明示的に指定すればすべてが機能しますが、つまみのサイズを変更して、幅を 100% にしたいのです。

CSS を作り直す方法に関するヒントはありますか?

CSS

ul#project-grid{list-style: none; list-style-image: none; padding: 0;}
    #project-grid li{float:left; position: relative; height:auto; margin: 0 1%; width: 23%;}

.project-thumb-container{background-color:#ffffff; margin:0 auto; padding: 12%; position: relative;}
.project-thumb-container img{width:100%; display:block; z-index:0; position: relative;}
.project-thumb-container img.colour{margin-top:-100%; opacity: 0;}
.project-thumb-container img.grey{filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ }

HTML/PHP

<ul id="project-grid" class="container cf">
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
            <img class="colour" src="<?php echo base_url(); ?>assets/project-thumb1.jpg" />
        </div>
    </li>
    <li>
        <div class="project-thumb-container">
            <img class="grey" src="<?php echo base_url(); ?>assets/test_thumb.png" />
            <img class="colour" src="<?php echo base_url(); ?>assets/test_thumb.png" />
        </div>
    </li>
</ul>

編集：

margin-top:-100%; ではない理由 長方形の親指で動作しますか？私の質問が却下された理由がわかりません...