Изменить изображение при наведении курсора в списке портфолио Wordpress - PullRequest
Новая
       28

Изменить изображение при наведении курсора в списке портфолио Wordpress

0 голосов
/ 07 сентября 2018

Я использую WordPress на своем сайте, и на главной странице установлен виджет «Список портфолио» визуального композитора.

У меня есть кладка изображений (ссылок), которые по клику ведут на страницу проекта.

Изображения, размещенные на домашней странице, представляют собой «избранные изображения», установленные на странице проекта портфолио. Есть ли шанс сделать эти изображения черно-белыми на главной странице, а затем раскрасить при наведении? Таким образом, они становятся черно-белыми, когда вы посещаете страницу, а затем окрашиваетесь, когда вы наводите на них курсор!

Ссылка: http://svenharambasic.com

Спасибо

1 Ответ

0 голосов
/ 07 сентября 2018

CSS имеет Фильтр эффектов , которые вы можете использовать. Обратите внимание, что они не полностью совместимы со старыми браузерами. Но filter: grayscale(100%) на изображении и filter: grayscale(0%) при наведении даст вам простой эффект, как вы описываете: 

.projects_holder img {
  filter: grayscale(100%);
  transition: .25s all ease-out;
}

.projects_holder img:hover {
  filter: grayscale(0%);
}
<div class="projects_holder">
  <img src="https://placekitten.com/200/300" />
  <img src="https://placekitten.com/220/280" />
  <img src="https://placekitten.com/300/250" />
</div>

Есть несколько способов улучшить поддержку браузера, если вы так склонны: https://gist.github.com/karlhorky/3478370

...