麻烦有两个图像重叠彼此是基于百分比调整大小

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+ */ }

<<p> HTML/PHP/strong>

<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>

编辑:

为什么不这样做呢?练习矩形拇指?我不明白为什么我的问题被否决了。

Answer 1

您是否尝试过使用jquery来添加和删除灰色类而不是使用2个图像?在我的jsfiddle上，我只更改了前2项:http://jsfiddle.net/jennift/NcPEw/

<div class="project-thumb-container">
    <img class="grey" src="yourimagesource" />   
</div>

jquery:

$(function() {
    $('.project-thumb-container > img').hover(
        //over
        function(){
            $(this).removeClass('grey');
        },
        //out
        function() {
            $(this).addClass('grey');
    });        
});

但是，如果你真的只想要CSS，不要js:

http://jsfiddle.net/jennift/HJmxm/1/

<div class="project-thumb-container">
    <img src="http:yoursource" />   
</div>

css:

.project-thumb-container img{
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
}
.project-thumb-container img:hover{
    filter: none;
    -webkit-filter: none;
}