调整图像大小时的颜色叠加（悬停）

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

我使用a：after选择器在图像顶部添加图层，而不是图像支架上的边框半径。应该更好吗？