Я использую этот учебник для эффекта наведения изображения: http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/
Последний оверлей по-прежнему всегда находится в очереди, а большой палец изображения уже находится в другой строке.
Вот скриншот: http://imgur.com/a/jABsl Каждый большой палец выглядит так:
<a href="image.jpg">
<span class="overlay"></span> <!-- this is position:absolute -->
<img src="thumb.jpg">
</a>
Спасибо за помощь.
Проверьте это: http://jsfiddle.net/XSgq4/
<div class="overlay">
<a href="http://www.stackoverflow.com/">
<img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png" />
</a>
</div>
CSS
.overlay {
display:inline-block;
position:relative;
}
.overlay > a:hover:after {
content:'';
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0, 0, 0, .3);
}
Или версия диапазона: http://jsfiddle.net/XSgq4/1/