Question 44815 in Html Question posted in
Some basic documentation can be found here.

How do I smoothly transition an invert filter (black to white)? – Html

I am currently trying to figure out how to transition my icons from black to white. The only way I could really find to do this properly was to use this: filter: invert (100%). When I try to transition it, it decides to change normally without a transition after the transition-delay is done. I have 0 idea what I am doing wrong.

Here is the relevant CSS and HTML:

.links {
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
  margin-right: 15px;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  transition-property: filter;
}

.link-trans {
  /* This is a class added to the <img> elements via JavaScript */
  filter: invert(100%)
}

.usercard {
  width: 310px;
  box-shadow: 0 0 5px 2px rgb(233, 233, 233);
  background-color: rgb(233, 233, 233);
  border: solid 5px rgb(233, 233, 233);
  border-radius: 5px;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

.usercard:hover {
  color: azure;
  border-color: rgb(18, 18, 18);
  background-color: rgb(18, 18, 18);
  transform: scale(1.1);
  margin-left: 20px;
  margin-right: 20px;
}

.main {
  display: flex;
  justify-content: space-between;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: auto;
  transform: translateY(15%);
}
<div class="main" id="main">
  <div class="usercard">
    <div class="links">
      <a href=""><img src="./icons/website.png" alt="" class="icon"></a>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0 
    body {
  background-color: rgb(126, 126, 126);
}

#Pic {
  filter: invert(0);
  transition-duration: 5s;
}

#Pic:hover {
  filter: invert(1);
}
    <!DOCTYPE html>
<html lang="en">
  <body>
    <img id="Pic" src="https://scratch.mit.edu/images/logo_sm.png">
    <!--I couldn't find a picture of a white rectangle that I trust will stay on the internet for a long time, I'm just going to use "scratch.mit.edu"'s icon-->
  </body>
</html>

    Transition duration good

    Sorry, I wasn’t able to understand your CSS

    Hope this helps

    Login or Signup to reply.
  2. 0

    just add your link-trans class to img tag

    <a href=""><img src="./icons/website.png" alt="" class="link-trans"></a>

    and change your css as

    link-trans{
  transition:all 3s;
 }
link-trans{
 filter:invert(100%)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search