CSS 3 blur filter without the use of transition timing

After discovering a unique method for achieving cross-browser blurring effects, I noticed that the transition wasn't quite working as expected. To solve this issue, I decided to make some adjustments by increasing the transition time and blur amount. This modification resulted in an instant blurring effect, just as I had hoped.

img.blur {
-webkit-filter: blur(30px); -moz-filter: blur(30px);
-o-filter: blur(30px); -ms-filter: blur(30px); 
filter: url(#blur); filter: blur(30px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-transition: 2s -webkit-filter linear;
-moz-transition: 2s -moz-filter linear;
-o-transition: 2s -o-filter linear;
transition: 2s filter linear;
}

http://codepen.io/CSobol/pen/LGCiw

Is there a specific reason why transition: filter does not seem to work with blur effects?

cssblurcss-filters

Answer №1

The unprefixed transition has been successfully implemented, however the filter property still requires the -webkit prefix. This causes the transition to override the webkit-transition property, resulting in a conflict with the unprefixed filter. To resolve this, the following adjustment can be made:

transition: 2s -webkit-filter linear;

Answer №2

Is this what you're looking for?

transition: 1s filter linear;
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;

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

Showing Stationary Pictures at Full Size in OpenLayers

I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variab ...

javascriptcssimageopenlayers-3

Ways to improve the quality of a blurred photo

I've recently put together a test landing page using bootstrap: Upon visiting the site and viewing the iPhone screenshot, it's clear that the text on the screen is quite blurry. Interestingly, by simply resizing the browser window and then maxi ...

csshtmlimagetwitter-bootstrapgif

The height of the input element is greater than the size of the font

I am facing an issue with an input element that has a height 2px higher than what I expected. Here is the relevant CSS: .input { font-size: 16px; padding: 15px; border: 1px solid black; border-radius: 3px; width: 400px; } <input class=" ...

htmlcss

Problems Arising from Center Aligning a Horizontal Navigation Menu

I have attempted various methods to shift the navigation bar as a whole, but I am facing a roadblock. The container for the navigation bar needs to adjust its size based on the size of the navigation bar. Since the number of links will change periodically, ...

htmlcss

Hide the entire TR if Mysql equals zero

How can I apply the style "display: none;" to an entire TR if the result from row credits is 0? Should I achieve this using CSS or a MySQL query? <?php $username = "root"; $password = ""; $database = "aaa"; $mysqli = ne ...

phpcssmysql

Hovering over an element and eliminating any extra space

Hey there, I'm looking for some assistance with removing the whitespace on hover. Below is the code along with a screenshot for reference: div.show_sizes_onhover { background: rgba(255,255,255,.9); bottom: -1px; color: #a1a1a1; left: 0; padding: 5px ...

htmlcsswebshop

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

htmlcss

Having trouble getting transitionProperty to work in the style object of your ReactJS CSS?

In my current setup, I have been utilizing css transitions triggered by property updates to manage animations within my react components and everything has been functioning smoothly up until now. However, I am encountering an issue where I only want to tr ...

cssreactjsjsx

Mastering Space Between Row Items in Bootstrap 5 Grid: A Guide to Gutters

Hello, I am currently utilizing Bootstrap 5 and making use of the grid system. My layout is divided into 2 rows - one containing text and an image, and the other row consisting of two images. While everything looks fine on a PC, the mobile view displays t ...

htmlcssbootstrap-5

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

cssvue.jssassvuejs3

Inequality in spacing between Bootstrap columns

I am currently working on a website where the home page has columns with icons and text. The issue arises on mobile devices as the columns stack unevenly due to varying text lengths, resulting in inconsistent vertical spacing. Is there a way to ensure cons ...

cssbootstrap-4

Disappearing Bootstrap 3 Dropdown Issue Caused by Tab Click

There is an issue with the drop-down menu I created: When I click on tabs like ALL or FILM, it closes all elements. To reopen, I have to click again on the button PRODUCT.dropdown-toggle. The code example looks like this: var App = function () { ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to insert a new module position within the vertex joomla framework

I have successfully added a new module position to the right side of the menu in Joomla 3 using the S5 Vertex framework. The changes were made in index.php as follows: <div id = "s5_newmodule"> <?php s5_module_call('s5_newmodul ...

phpcssjoomlaframeworksposition

Generating a table with two columns utilizing ng-repeat

I am currently dealing with an array of objects that I need to showcase in a two-column layout. The challenge arises because some columns have more data than others, requiring equi-height rows. Despite utilizing Bootstrap and clearfix in my attempts to di ...

angularjshtmltwitter-bootstrapcss

Can JQuery's 'unslider' be customized to only change the backgrounds?

Check out my source at this link: http://codepen.io/anon/pen/Bvkjx Observe how the content and background images rotate correctly. Now, I'm curious if it's feasible to keep the following content static <p>SOME CONTENT1</p> while ...

javascriptjqueryhtmlcss

What could be causing the unresponsive hamburger button on my navbar?

As a beginner in HTML and Flask, I am attempting to create a navbar. However, I am encountering an issue with the hamburger button not functioning properly. When I resize the window smaller, the hamburger button appears but does not show the items like "Lo ...

htmlcssflask

Tailored design - Personalize interlocking elements

I am currently working on a custom theme and I am trying to adjust the font size of Menu items. In order to achieve this, I have identified the following elements in the tree: ul (MuiMenu-list) MuiListItem-root MuiListItemText-root If I want to modify th ...

javascriptcssreactjsmaterial-ui

implementing HtmlSpanner with an appended css stylesheet

Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...

androidcssfromhtml

Unable to close Bootstrap sidebar menu on mobile devices

I implemented a sidebar menu for mobile that opens when you click on the hamburger icon, with a dark overlay covering the body. The issue I encountered is that on mobile devices, the visibility of the menu does not change when clicked outside of it. It wor ...

javascripthtmlcssshopify

What is the best way to eliminate unwanted white space at the top of the page?

I'm new to web development and I'm exploring the concept of white space at the top of a webpage. Here is a snippet of my code: HTML: <div> <p>lorem ipsum</P> </div> CSS: div { background-color: black; } I attem ...

htmlcss