Переместить 1-й div вверх и открыть текст (2-й div) при наведении указателя мыши на 1-й div

Question

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

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

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

Я попытался это:

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

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

Может ли кто-нибудь мне помочь? Я не очень опытен с этим уровнем css.

Answer 1

Вы просто не нужен +, как .service-content-bg является потомком .service-bg

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

Fiddle

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

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

Fiddle