html - 图像调整大小 :hover

Question

我无法使它正常工作。当用户将鼠标放在这个 div 上时，如何在不调整图像大小的情况下实现这一点？

Fiddle

HTML:

<div id="highlight" class="outerbox">   
    <div id="boxTitle">
        Highlight
    </div>
<img src="http://lookouch.com/www/assets/newImages/home/modulos/1.jpg"/>
</div>

CSS:

#boxTitle { 
    color: #ffffff; 
    background-color: #6000ff; 
    padding: 5px 5px 5px 5px; 
    position: absolute; 
    font-family: Montserrat; 
    font-size: 13px; 
    display: inline-block; 
    top: 0; 
    left: 0; 
}

#highlight { width: 100%; display: inline-block; position: relative; }
#highlight img { width: 100%; height: 100%; }

#highlight:hover { 
    border: 2px solid #6000ff; 
    box-sizing: border-box; 
    overflow: hidden; 
}

Answer 1

三件事:

1. 给高亮div一个透明边框:border: 2px solid transparent;。这将停止跳跃。
2. 将 vertical-align:top; 添加到 #highlight img 以消除图像下方的间隙。
3. 从 #highlight:hover 中删除 box-sizing: border-box;。这里不需要。

jsFiddle example