Create a choppy distortion effect using CSS filters in Google Chrome

Currently working on a hover effect that enhances image brightness and scales the image during hover. However, I am experiencing some choppiness in the transform animation due to the CSS filter. It's strange because it appears to be smooth in Safari and Firefox. Any thoughts on why this might be happening?

Here is the basic setup:

.parent
  width: 300px;
  height: 300px;
  overflow: hidden;
  img
    transition: all 1s ease-out;
    transform: translate(0px, 0);
    filter: brightness(80%);
    &:hover
      transform: scale(1.1);

For a full demonstration, check out this link: http://codepen.io/tzzo/pen/MmKeVm

Thank you!

cssgoogle-chromepugstylus

Answer №1

After reviewing the codepen using Chrome 56, I noticed that the image brightness effect is quite seamless for me. One suggestion to enhance this feature further is by applying the filter not only on the image but also on hover:

img:hover {
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
}

Answer №2

To add hover effects, you can use the following code:

.image-container img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1.0;
    filter: brightness(150%);
}

Answer №3

Although I can't detect the issue on my own system, there have been occasions where I've encountered this problem before

One potential solution you could explore is activating hardware acceleration on the element by incorporating transform3d

.parent
  width: 300px
  height: 300px
  overflow: hidden
  img
    transition: all 1s ease-out
    transform: translate3d(0,0,0)
    filter: brightness(80%)
    &:hover
      transform: scale(1.1) translate3d(0,0,0)

Remember to re-apply the translate when modifying the transform within the hover rule

Answer №4

After carefully considering my options, I developed a sleek and well-supported implementation.

I decided to forego using CSS filters and instead opted for utilizing opacity. If the image's background doesn't mesh well with it, you can always set it separately.

img
  background-color: black;
  opacity: 0.8;
  transition: all 3s ease-in-out;
  &:hover {
     opacity: 1;
     transform: scale(1.1);
  }

You can find the successful solution on my CodePen here: http://codepen.io/tzzo/pen/MmKeVm

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

I've encountered an issue with a form that includes: <input type="password" id="password" /> I want to display some readable text temporarily, so I used the following code: $('#password').prop('type', 'text'); ...

javascriptjquerygoogle-chromeinternet-explorerpasswords

Building interactive web pages with PHP and jQuery by incorporating dynamic classes

I'm looking to create a unique PHP snippet, possibly in the form of a WordPress code snippet, to generate a dynamic CSS class every time a module is loaded on the front end. This dynamically generated class will then be used by jQuery to style the fro ...

phpjqueryhtmlcsswordpress

Establish a connection between a PHP webpage and a MySQL database

I've been struggling to establish a connection between my php pages and MySQL. Being new to php, I've attempted various solutions found online but none seem to work for me. Even after creating a database and downloading a php form, the data is no ...

phphtmlcssmysqlsql

"Consolidating into one large package, Less is compiled and bundled together

Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...

cssless

What is the effect of SEO on the use of image width and height attributes for a responsive website

Is it true that setting inline width and height for all images is beneficial for SEO and can improve site loading speed? Here's an example: <img src="http://www.example.com/images/free-size.jpg" width="200" height="400" alt="random image" /> E ...

htmlcssperformanceseo

Is it possible to shift the div inline-block using the CSS :after selector?

I'm looking to adjust the placement of the disk icon so that it aligns more with the baseline of the text without increasing the vertical space between lines. Below is the CSS code I've worked on so far: .openPage:after { content: ' &a ...

htmlcss

'OR' separated by the <hr> tag

This particular code functions correctly on the Firefox and Chrome browsers. However, there seems to be an issue with IE and Opera, where the 'OR' text is only visible within a 2px height area. hr { height: 2px; border: 0; background-color ...

htmlcss

Issue with Angular 9 Json pipe not showing decimal values

My JSON data looks like this: this.data = {"eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": 0.0, "pendingApplicationCount": 24.0, " ...

htmlcssangularpipeless

Ways to transition to the subsequent page in Selenium WebDriver following the click of the submit button

https://i.sstatic.net/QWcHm.jpg After successfully automating the process of filling in a textbox and clicking the "proceed with booking" button using a submit() command, I encountered an issue. The HTML code does not provide a URL that can be used in the ...

pythonhtmlcssseleniumwebdriver

steps for marking comments as read or unread by multiple users

I'm working on a development blog for my project and I'd like to add a feature where users can mark comments as unread until they view them. For example, if an admin posts a comment, all users in that project should see it as unread. Can anyone ...

phpcssphpmyadmin

Eradicate white space in a JavaScript code

Calling all JS programmers! Here's a challenge for you, check out this demo: https://codepen.io/gschier/pen/jkivt I'm looking to tweak 'The pen is simple.' to be 'The pen issimple.' by removing the extra space after 'is& ...

javascripthtmlcss

The issue regarding the fixed table layout bug in Firefox

Upon testing Firefox 5, it has come to my notice that an additional pixel of space is being added between the right column and the table border due to this particular piece of code: <style type="text/css"> table { border: 1px s ...

htmlcssfirefoxhtml-table

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

Displaying every nth image in a new row of a CSS grid

I have a react component and I want to arrange 3 photos inline in a row with their names below each photo, and then continue in new rows for the next set of 3 elements and so on... I attempted to use :nth-child(3n+1) but encountered some issues... const P ...

cssreactjscss-selectors

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

htmlinternet-explorercss

Automatically sync textbox width with gridview dimensions

My goal is to dynamically resize a number of textboxes so that they match the width of my gridview's table headers. The gridview will always have the same number of columns, but their widths may vary. However, as shown in the image below, the width va ...

javascriptjqueryasp.netcssgridview

The CSS focus-within and hover properties are not functioning as expected

How can I make the search tags visible (the buttons above the text input field) when the search bar below them is clicked? I've tried using :hover, :focus, and :focus-within, but none of them seem to be working. Can someone help me figure out the issu ...

htmlcsscss-selectorshoverfocus

Sentence following the original passage

I want to achieve a similar look as the example below: Here is what I have done so far: h2:after { content: ""; display: inline-block; height: 0.5em; vertical-align: bottom; width: 48px; margin-right: -100%; margin-left: 10px; border-bo ...

htmlcss

Issues with adjusting the height using CSS transformations are not being resolved

There seems to be an issue with animating the height property of an element as it is not animating at all. Check out the fiddle where the animation is attempted. Here is the HTML: <ul> <li> li 1 </li> <li> ...

javascriptjquerycss