Numerous filter passages

Question

Numerous filter passages

How can I make an image white on hover using CSS filters and transitions?

.uni-im img {
    filter: brightness(0) invert(1);
}

I have added a transition property for a smooth effect:

.uni-im img {
    filter: brightness(0) invert(1);
    transition: filter .15s linear;
}

However, the transition affects both the brightness and invert properties simultaneously. Is there a way to make it turn white directly without passing through black?
Is this achievable with pure CSS?

Here's an example of what I'm trying to achieve:

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 2s linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 2s linear;
}

div:hover {
  background: #3F85CE;
}
div:hover img {
  filter: brightness(0) invert(1);
}

<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA3WAAAN1gGQb3mcAAAAB3RJTUUH4gsGEwwX9OWpBgAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTFH80I3AAAC00lEQVR4Xu2Z3UrEMBCFqyirq/iHLKggeCe6CuKFPzeuLIpXXqh4Iejb+Hq+ks7USZ3NJmltNqWrpxDczaYz53ydpGnNMhwgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAKlBJau3j8+29hI+VKp+pgBbTTt0hTjMXiuSZYsQWT...

css

Answer 1

Answer №1

To enhance the visibility of the effect, I've devised a new code snippet where the image's color is utilized as a background.

Rest assured, this method will yield similar results for your specific scenario.

All you need to do is modify the filters that you are currently implementing.

.test {
  width: 200px;
  height: 150px;
  background: cyan;
  margin: 20px;
  transition: filter 4s;
}

.test:hover {
  filter:  grayscale(1) brightness(1.5);
}

<div class="test"></div>

Answer 2

To enhance the visibility of the effect, I've devised a new code snippet where the image's color is utilized as a background.

Rest assured, this method will yield similar results for your specific scenario.

All you need to do is modify the filters that you are currently implementing.

.test {
  width: 200px;
  height: 150px;
  background: cyan;
  margin: 20px;
  transition: filter 4s;
}

.test:hover {
  filter:  grayscale(1) brightness(1.5);
}

<div class="test"></div>

Answer 3

Answer №2

The code snippet you shared specifies a 2 second transition duration. If the transition time is reduced, the black color will not be visible.

For example:

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 100ms linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 100ms linear;
}

You can also eliminate the transition effect on the image element. This way, the background will transition from white to blue over .15 seconds, while the image will instantly change from blue to white without going through the black color in between.

Answer 4

The code snippet you shared specifies a 2 second transition duration. If the transition time is reduced, the black color will not be visible.

For example:

div {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  display: inline-block;
  transition: background 100ms linear;
}
img {
  width: 30px;
  height: 30px;
  transition: filter 100ms linear;
}

You can also eliminate the transition effect on the image element. This way, the background will transition from white to blue over .15 seconds, while the image will instantly change from blue to white without going through the black color in between.

Numerous filter passages

Answer №1

Answer №2

Similar questions

Obtaining a fingerprint image from a scanner and incorporating it into a user registration form

Prevent certain parts of an element from displaying using CSS

Bug with Image Scaling on iPhone 6+ in Unsemantic Grid

Dreamweaver and jQuery collaboration for displaying PDFs in a container

There appears to be a malfunction with WebRupee

Generate a vertical line that spans the entire length of the webpage in a vertical direction

Prevent the text within the textarea from wrapping onto the next line

The fonts appear differently when working on a Mac but show up as Times New Roman when displayed on Windows in development

Crafting a Presentation of Inspirational Words

Issues concerning margins and scroll bars

Expanding and collapsing a div using jQuery when an image is clicked

Alter the text color once the halfway point is reached at an angle of 175 degrees

Space within a receptacle

The website is missing a scrollbar

Centralize and confine the menu division

Tips for preventing line breaks in CSS while adjusting zoom levels on a webpage

Displaying Image from Jquery Ajax Response

Click on the shadowed div element to interact: inset

The first div should be hidden when the toggle is activated

Color of Bootstrap tooltip arrow outline and fill