Можно ли скрыть скрытое изображение и показать другое изображение, используя только CSS?

Question

Моя проблема в том, что у меня есть 2 изображения; #two изначально скрыт.

Есть ли способ только в CSS (без JS), чтобы при наведении курсора на #one он скрывался и показывался #two, возможно с некоторой анимацией

#two{
    display:none;
}
#one:hover + #two{
    display: block;
}

<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

PS: я работаю над расширением Google Chrome

РЕДАКТИРОВАТЬ: есть идея использовать background-image : url() изображения и изменять его при наведении, но я не хочу его, так как он не работает, ему нужно указать полный путь расширения Chrome, включая идентификатор расширения

Answer 1

@ ATomCalledStu дал только CSS-ответ, но это работает, только если у вас есть относительная оболочка.

Что бы работать лучше с любой оберткой, это установить :hover на обертку:

.wrapper, img {
  display:inline-block;
}
#two {
  display:none;
}
.wrapper:hover #two {
  display: inline-block;
}
.wrapper:hover #one {
  display: none;
}

<div class="wrapper">
  <img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

  <img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>
</div>

Если вы измените чей-то сайт, вы, вероятно, увидите, что изображения, скорее всего, содержат элемент-обертку (div, span, что угодно) и используете его для установки селектора :hover.

Я обычно хочу избегать position:absolute, если я не абсолютно уверен, что поведение никогда не зависит от взаимного расположения. В этом случае, особенно из-за того, что я не знаю, как выглядит ваша страница, вероятность того, что absolute не сработает, представляется весьма вероятной.

Обновление:

Если вам нужна анимация, вам лучше всего использовать position:absolute, как предлагалось в предыдущем ответе. Извините за путаницу;)

Answer 2

Вы можете просто наложить их с абсолютным позиционированием, а затем уменьшить прозрачность на верхнем изображении при наведении, например:

img {
  position:absolute;
  top:0;
  left:0;
  transition:all .6s ease;
}
#one {
  z-index:20;
}
#one:hover {
  opacity:0;
}

Вот рабочий пример: https://jsfiddle.net/pksjg76x/

Вы не можете использовать display:none в этом случае, потому что вам нужно, чтобы верхний элемент оставался внутри документа, чтобы использовать свойство hover. Изменение непрозрачности может быть вашим лучшим вариантом, если вам не нужно, чтобы второе изображение содержало какие-либо функции помимо просмотра.

Здесь вы также можете очень легко использовать свойства анимации.

Answer 3

Вот полное решение с анимацией:

Вы устанавливаете их как position: absolute, а body равно position: relative (или какому-либо другому контейнеру).

Затем вы устанавливаете display: block;, но opacity: 0; на скрытом. установить переходы на css для скрытого элемента, а также установить тот же opacity: 1; при наведении на второй элемент. Тебе хорошо идти:

#two {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: 0;
  transition: all 1s linear;
}

#one {
  position: absolute;
  z-index: 0;
}

#one:hover+#two,
#two:hover {
  opacity: 1;
}

body {
  position: relative;
}

<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>