Реализация при наведении

[FaLaRD]

Всем привет

Помогите реализовать подобный эффект:

http://clip2net.com/s/5Q5U3K

Не могу правильно реализовать эффект полос при наведении

[Galaxy]

:before , :after при ховере в помощь.

[mrnobody]

У меня вот так получилось http://jsfiddle.net/mrnobody/pMf2A/

[FaLaRD]

У меня вот так получилось http://jsfiddle.net/mrnobody/pMf2A/

Спасибо огромное

[FaLaRD]

У меня вот так получилось http://jsfiddle.net/mrnobody/pMf2A/

Спасибо огромное

А есть идеи как реализовать кроссбраузерно. В опере все слетело, в ИЕ before не работает

[Vlad]

before прекрасно работает в IE, в будущем уточняйте версию, это принципиально.

Вот другой подход, с некоторыми недостатками. Модернизировал код mrnobody.

http://jsfiddle.net/4pCsn/

[mrnobody]

Заменил псевдоэлементы на элементы span. Но во ВСЕХ IE (!) не работает левый span (.before) — убираю margin-left: -101%; становится нормально, но в остальных браузерах не отображается.

Вот, может кто-нибудь исправит http://jsfiddle.net/mrnobody/pMf2A/5/

before прекрасно работает в IE, в будущем уточняйте версию, это принципиально.

Вот другой подход, с некоторыми недостатками. Модернизировал код mrnobody.

http://jsfiddle.net/4pCsn/

Наверное недостаток в том, что хорошо будет работать при однородном фоне, без градиента и фоновых картинок?

Edited September 28, 2013 by mrnobody

[FaLaRD]

before прекрасно работает в IE, в будущем уточняйте версию, это принципиально.

Вот другой подход, с некоторыми недостатками. Модернизировал код mrnobody.

http://jsfiddle.net/4pCsn/

before прекрасно работает в IE, в будущем уточняйте версию, это принципиально.

Вот другой подход, с некоторыми недостатками. Модернизировал код mrnobody.

http://jsfiddle.net/4pCsn/

http://clip2net.com/s/5Q5U3K

Вы невнимательно ознакомились со скриншотом. Ссылке фон нельзя ставить, так как под ней по задумке должна быть подложка. На скриншоте это видно. Если поставить ссылке фон будет сильно отличаться. Первый вариант был хорош, но в ИЕ (независимо какой версии) before не срабатывает, левая полоса

[hypnocolor]

Можно чуть расширить первый предложенный вариант — и будет работать везде.

http://jsfiddle.net/pMf2A/10/

Edited September 30, 2013 by hypnocolor

[mrnobody]

Странно, почему со span нормально работает .

Поставил positon: relative элементу h2, и стало хорошо работать как в примере hypnocolor, и без лишних span-элементов

http://jsfiddle.net/mrnobody/pMf2A/11/

На весь экран — http://fiddle.jshell.net/mrnobody/pMf2A/11/show/

[FaLaRD]

Можно чуть расширить первый предложенный вариант — и будет работать везде.

http://jsfiddle.net/pMf2A/10/

Спасибо! Твой вариант просто божественен)