CODEWITHSUNDEEP
css
Pedro
Pedro

Reputation: 91

Drop filter on hover action

I have a map wher I want to add gray filter and remove it when mouse hover map. So I do class like this:

.profile-pic {
  width: 100%;
  height: auto;
  /* border-radius: 50%; */
  box-shadow: #222 0.2em 0.2em 1em;

  -webkit-filter: grayscale(100%) brightness(135%) contrast(120%);
  filter: grayscale(100%) brightness(135%) contrast(120%);

  transition: filter 0.3s, box-shadow 0.3s;
  -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s;
}
.profile-pic:hover .profile-pic:focus {
  -webkit-filter: none;
  filter: none;
  box-shadow: #224 0.2em 0.2em 0.6em 0.1em;
}

But is like focus event don't works, can someone take a look what happen there:

There is complete approach of it: fiddle

Upvotes: 0

Views: 316

Answers (1)

Rajeev Ranjan
Rajeev Ranjan

Reputation: 497

You need to add a comma between the selector

.profile-pic:hover, .profile-pic:focus

And here is a fiddle for you demo

Upvotes: 2

Related Questions