Как сделать, чтобы img при :hover менялся на img (background: не предлагать)?

Question

[Flasher]

Как сделать, чтобы img при :hover менялся на img (background: не предлагать)?

Есть вид , но пустая ссылка не должна быть (для тех, кто хочет предложить background).

Comments

[Flasher]

PS. Это точки на карте, которые будут менятся при наведении.

[Flasher]

Answer 1

[edbond88]

Можно еще так, тогда будет происходить плавный переход:

a {
  position: relative;
}

a img:last-child {
  position: absolute;
  top: 0;
  left: 0;
}
a:hover img:first-child,
a img:last-child {
    opacity: 0;
    visibility: hidden;
    transition: visibility 150ms ease, opacity 150ms ease;
}
a:hover img:last-child {
    opacity: 1;
    visibility: visible; 
}

Answer 2

[hadra]

А пример ? Я не совсем вас понял

Comments

[Flasher]

Уточнил вопрос.

[hadra]

@Flasher display: none и display: block к примеру .. менять их значение при наведении

Answer 3

[Руслан Касымов]

Можно без background на :hover поменять img, при этом ссылка будет полная. lol (:

Answer 4

[Seva Sargsyan]

display: none display: block

Answer 5

[Назар Мокринский]

Примерно так:

a:hover img:first-child,
a img:last-child {
    display:none;
}
a:hover img:last-child {
    display: block;
}

Answer 6

[Александр]

можно использовать :after :before

img {
    position: relative;
}
img:before {
    display: none;
    content: url('pic.png');
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}
img:hover:before {
    display: block;
}