Как сделать, чтобы при наведении на див, на его месте появлялся другой див?

Question

[Nikita Titov]

Привет.

Верстаю макет для портфолио и столкнулся с проблемой.

Есть 4 дива. Нужно, чтобы при наведении на один из них, див заменялся на другой, а первоначальный скрывался.

Знаю, что нужно сделать как-то через :hover, но не знаю подробностей.

Искал в нете, но то, что я находил не подходило мне, там блок уходил вниз, а мне нужно чтобы он был прямо на том месте, где находился первоначальный див. хотя вроде как способ тот-же.

Помощникам буду сильно благодарен, а способ выучу на зубок на будущие проекты.

Первоначальные дивы:

При наведении на один из них заменялся на один див ниже:

Answer 1

[neolink]

элементарно же:
jsfiddle.net/vfkwj3nw

можно даже по экспериментировать с переходами:
jsfiddle.net/k6dufqkm

Comments

[Nikita Titov]

Для кого как, для меня, например нет. Я верстаю довольно мало. Сделал только 2,5 макета. Большое спасибо Вам за помощь.

Answer 2

[rakro]

Разве не проще менять свойство background:

div {
background: url(language_manager.png);
}
div:hover {
background: url(we_are_hiring.png);
}

Comments

[Nikita Titov]

Какие bg? У меня это не png, а сверстанные блоки. Просто для наглядности я показал вам скриншоты.