Переместитесь на 1-й деление вверх и покажите текст (2-й дел), находясь над 1-м делением

Question

0

Моя проблема - это div, который должен двигаться вверх, паря над ним. Проверьте этот JSfiddle для справки.

То, что я пытаюсь достичь, следующее:

Как вы можете видеть, правый div является зависающим. В jsfiddle я взял 1 div, который я пытаюсь добиться эффекта наведения, но я просто не понимаю.

Я попробовал это:

.service-bg:hover + .service-content-bg {
    background-position:0 -250px;
}

Но ничего не происходит.

Кто-нибудь может мне помочь, пожалуйста! Я не очень опытен с этим уровнем css.

Whazam 18 фев. 2014, в 10:59

Теги:

1 ответ

Colin Bacon · Accepted Answer · 2014-02-18T08-26-00.000Z

Вам просто не нужен + поскольку .service-content-bg является дочерним .service-bg

.service-bg:hover .service-content-bg {
    background-position:0 -250px;
}

Чтобы затем показать скрытый текст, вам нужно добавить следующий CSS

.service-bg:hover .service-hidden {
    display: block;
}

Вау, отлично! Хорошо, теперь фон сместился вверх, но остальное не сместилось вверх, как показано на рисунке. Это сделано так же?
@ user3082136 см обновленный ответ и скрипка
У меня все работает сейчас: jsfiddle.net/Barq/efA9V/9 Остается только один вопрос: можно ли немного сгладить этот эффект? Примерно так : demos.xiaothemes.com/rudermann/portfolios/portfolio-grid-4
Неважно, получил это сам! добавлено: переход: все 0.3 с легкостью 0 с;