如何在畫廊的浮動圖像上創建懸停邊框/輪廓？

Question

請原諒，如果這是一個相當基本的問題。我瀏覽過谷歌和其他地方，還沒有找到適合我的解決方案。

我正在使用以下標記生成圖片庫。

<div class="gallery"> 
    <a class="galleryimg"> 
    <img> 
    </a> 
    .... 
</div> 

根據圖庫中圖像的數量重複.galleryimg。它被左移。

我想創建一個:hover效果，概述所選圖像。我嘗試過使用邊框（弄亂佈局），輪廓（原則上聽起來很完美）和插入框陰影（在圖像下面呈現）。

輪廓非常接近我想要實現的。但是右側和底部的輪廓被浮在其上的相鄰圖像所遮擋。

所以我的問題：我如何創建懸停邊框/輪廓效果鏈接圖像的畫廊？

我真的很感激任何有關其他人如何解決這個問題的想法。謝謝！！

EDIT

的圖像被抵接，之間沒有空白空間。

Answer 1

如果使用box-sizing屬性（因爲IE8支持），你可以在:hover添加邊框沒有這個屬性弄亂佈局

.galleryimg { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width : 100px; 
    float : left; 
} 

.galleryimg:hover { 
    border : 3px gray solid; 
} 

看到http://paulirish.com/2012/box-sizing-border-box-ftw/更多信息

Answer 2

HI，你可以簡單地使用使用css技巧像這樣

css

#example-one a img, #example-one a   { border: none; overflow: hidden; float: left; } 
#example-one a:hover       { border: 3px solid black; } 
#example-one a img{width:100px;height:50px;} 
#example-one a:hover img      { margin: -3px;}​ 

現場演示http://jsfiddle.net/rohitazad/QkT7d/3/

更多有關此，請點擊這裏http://css-tricks.com/examples/InnerBorderImages/#

Answer 3

http://jsfiddle.net/Vvr7C/ 訣竅是添加上了名爲.gallery填充，所以你會看到大綱還對那些在圖像邊緣OD畫廊：

.gallery {padding:2px} 
.galleryimg:hover img {outline: red solid 2px}​ 

Answer 4

檢查了這一點：

http://jsfiddle.net/hMNZE/

可能是預期的效果。你會經歷圖像的細微變化，因爲它使自己變小以允許邊界。但請讓我知道。這只是一個快速解決方案。

---編輯---

http://jsfiddle.net/hMNZE/2/

是使用負利潤率第二個版本，這看起來不錯，但在圖像重疊一點點。

退房鏈接：http://css-tricks.com/examples/InnerBorderImages/

--- EDIT2 ---

http://jsfiddle.net/hMNZE/3/是最好的

--- EDIT3 ---

.gallery { 
    width:100%; 
    height:100%; 
    padding:10px; 
} 

.galleryimg { 
    float:left 
} 

.galleryimg img { 
    z-index:-10; 
} 

.galleryimg img:hover { 
    margin:-2px; 
    border:2px solid blue; 
    z-index:9999; 
}​ 

Answer 5

如果您正在使用box-shadow &它低於其他圖像然後像這樣寫：

.gallery img:hover{ 
padding:0; 
box-shaow:0 0 0 2px red; 
z-index:1; 
} 
.gallery img{position:relative;} 

Answer 6

如果你的問題在上面得到了回答，那很好。如果沒有，這聽起來像你可能需要一些邊緣之間的圖像和其他物體。你說這是模糊的。它可能只需要2px左右的餘量來掩蓋它。

Answer 7

嗨，你可以輕鬆地做這件事通過CSS3 * 箱陰影 *屬性： -

box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9); 

看到更好的理解演示： - http://jsbin.com/upedel/5/edit

修訂ANWSER

請參閱更新的演示： - http://jsbin.com/upedel/10/edit