Абсолютная позиция CSS в линейных элементах

Question

Абсолютная позиция CSS в линейных элементах

0

Я использую этот учебник для эффекта наведения изображения: 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>

Спасибо за помощь.

user3061425 03 дек. 2013, в 14:10

Источник

2

какой у Вас вопрос?
Liam Sorsby 03 дек. 2013, в 12:42
1

Поделитесь своим кодом! или создайте скрипку
rynhe 03 дек. 2013, в 12:43
0

в чем проблема с кодом
Pranav C Balan 03 дек. 2013, в 12:44
0

Как сделать каждый оверлей на IMG? Последний промежуток в строке вне тега, и я хочу сделать это внутри тега. Код точно такой же, как в первой ссылке.
user3061425 03 дек. 2013, в 12:44
0

установить положение относительно parrent и абсолютное положение относительно img, затем отрегулировать, используя top, left вот и все
Pranav C Balan 03 дек. 2013, в 12:46
0

@Parnav Я пытался - это не сработало.
user3061425 03 дек. 2013, в 12:50

Показать ещё 4 комментария

Теги:

jquery

css

position

absolute

1 ответ

Ещё вопросы

Поделитесь своим кодом! или создайте скрипку
Как сделать каждый оверлей на IMG? Последний промежуток в строке вне тега, и я хочу сделать это внутри тега. Код точно такой же, как в первой ссылке.
установить положение относительно parrent и абсолютное положение относительно img, затем отрегулировать, используя top, left вот и все

Tom Chung · Answer 1 · 2013-12-03T11-06-00.000Z

Проверьте это: 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/

: после не будет работать для каждого браузера
Развернутая версия предоставлена jsfiddle.net/XSgq4/1
Два варианта, span более совместим: после более чистый.
Попробуйте изменить размер результата: fiddle.jshell.net/D4zSM/1 Я пытаюсь сделать красное наложение всегда на каждом сером img, даже при изменении размера браузера.
Хорошо, посмотрим, может ли это вам помочь: fiddle.jshell.net/D4zSM/4
@ TomChung это прекрасно работает, спасибо! Это именно то, что я пытался сделать. Еще раз спасибо!