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

Question

[Groofy]

Имеем div с размерами 100 px на 100 px, с заданным в CSS background-image
Задача - сделать так чтобы при наведении на div в его центре появлялась картинка, например 10 px на 10px
Интересует весь код, и HTML и CSS

Answer 1

[Златослав Десятников]

Первый блок - это тот, на который наводите, второй - тот, который будет появляться.

.block1:hover  .block2 {
    display: block;
}

Вот линк на jsbin: тыц.

Comments

[Groofy]

спасибо, когда Вы из кода убрали ~ все заработало

[Златослав Десятников]

Groofy: ошибся немного.

Answer 2

[Антон Цепковский]

<div><img /></div>

div {position: relative}
img {display: none; position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -5px}
div:hover img {display: block}

Comments

[Groofy]

Ваш ответ не был понятен в начале, но пригодился потом, спасибо

[Антон Цепковский]

на здоровье