html - 调整图像大小的颜色叠加(悬停)

Question

我想在图像上叠加颜色。现在这很简单，但是考虑到图像的边框在悬停时会发生变化，事实并非如此(对我来说，因为我对 CSS 还很陌生)。我不知道这是否可以通过 CSS 实现，或者您是否必须使用 JavaScript(或 JQuery)？

到目前为止，我已经试过了:将图像放在 <div> 中，在悬停时动态调整大小。这工作得很好，但因为我要有一个黑暗的背景，所以有一个小问题。图像周围始终有一个小于一个像素的最小“边框”:

它几乎看不见，但让我很烦。我已经尝试将外部 div 变小，但这会留下未褪色图像和白色边框的偏心线。

在这里看看我的代码(没什么特别的，但以防万一):JSFiddle

有什么方法可以解决这个问题吗？我还没有学过很多 Javascript，所以我宁愿用 css 而不是 js，但是如果没有其他方法......

Answer 1

我更新了一些代码；见http://jsfiddle.net/GR8Vq/ :

* {
    margin: 0;
    padding: 0;
}

body {
    background: #000;
}

.imgholder {
    position: relative; // added
    margin: 5px;
    // background: #fff;
    float: left;
    height: 200px;
    // border-radius: 200px / 110px;
    transition: border-radius 0.3s ease-out;
}

.imgholder img,
.imgholder:after {
    border-radius: 200px / 110px;
    transition: 0.3s ease-out;
}

.imgholder:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,.3);
    opacity: 0;
}

.imgholder:hover:after { opacity: 1; }

.imgholder:hover{
    border-radius: 20px;
}

.imgholder:hover img,
.imgholder:hover:after {
    border-radius: 20px;
}

我使用 :after 选择器在图像顶部添加一个图层，而不是图像支架上的 border-radius。应该这样比较好吧？