Черную картинку заменять на белую при наведении

169

04 июля 2017, 20:33

Какие есть способы замены черного изображения на белое с помощью css при :hover?

Использую такой способ (не очень хороший, потому как 2 изображения нужно загружать):

.img { 
  display: block; 
} 
 
.img_hover { 
  display: none; 
} 
 
.box:hover .img { 
  display: none; 
} 
 
.box:hover .img_hover { 
  display: block; 
}

<div class="box"> 
  <img src="https://dummyimage.com/200x200/000/fff&text=black" alt="" class="img"> 
  <img src="https://dummyimage.com/200x200/fff/000&text=white" alt="" class="img_hover"> 
</div>

Может быть есть способ с помощью фильтра или еще какие-нибудь варианты? Картинка должна быть именно инлайновой (не фоном) и эффект должен быть максимально кроссбраузерным.

Answer 1

Можно воспользоваться фильтром invert()

.img:hover { 
  filter: invert(100%); 
}

<div class="box"> 
  <img src="https://dummyimage.com/200x200/000/fff&text=black" alt="" class="img"> 
</div>

Данный код не будет работать в IE (в EDGE все нормально), так как у него свои фильтры. Судя по справке для IE стиль должен использовать фильтр BasicImage cо свойством invert

Но у меня пример из справки не заработал:

.img:hover { 
  filter: progid: DXImageTransform.Microsoft.BasicImage(Invert=1); 
}

<div class="box"> 
  <img src="https://dummyimage.com/200x200/000/fff&text=black" alt="" class="img"> 
</div>

Так же указано, что начиная с IE10 такие фильтры устаревшие и отключены по умолчанию.

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Черную картинку заменять на белую при наведении

проблемы с элементами списка <ul>

Сделать Generic метод

Сериализация свойства коллекции

Работа со спрайтами