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>

编辑：

为什么没有保证金最高价：-100％;在矩形拇指上工作？我不明白为什么我的问题被否决了......

Answer 1

您是否尝试使用jquery添加和删除灰色类而不是使用2个图像？在我的jsfiddle上，我只对前两项进行了更改：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;
}

麻烦有两个图像相互重叠，根据百分比调整大小

1 个答案: