On my first bloc under the nav section I have a background image that I would like to blur and darken just a bit after the page loads and my header text fades in. Can I do this? I’ve tried with a bloc wide class but then the header text gets blurred as well and I can’t control the blur timing. Cheers
Currently there is no way to time this type of effect, however you can create it with a background filter blur. This Blocs Byte video explains the basic setup.
Thanks Norm. I’ll fool around with that.
If it is an image as you mention, always blurred & darken (no mouse out/hover as eg), why not directly doing it with your Affinity or photoshop app… ?
Depending your design “situation”, adding css blur effect in css style pannel can be also an option…
(I’m attempting today a blurred background css (behind modal popup) for my site, if I succeed I will put the solution here…)
@3RIC Yeah this is a good shout.
I do think the user wanted the blur to fade in on load…so I am guessing with some CSS this can be done. I did something very similar - but was a yellow glow on the screen fading in, as the website was live for just 2hrs ! I did this in a video that loaded in its image and then the glow moved in and got darker and then the text faded in. I did this strangely enough in Keynote !!! and saved it as a video as one slide.
I had 2 days to do the simple website so did it this way and worked brilliantly!!! I agree, not perfect…but my little hack work around!!
Not suggesting this is the way @Lancedboyle should do this - as mine was a QUICK fix for a website my client wanted to see asap.
For this instance, I would just apply the image and blur like @Norm has said and have the text fade in on a delay and slow fade in - that will be nice.
Good luck - and please show your results !
Quick and dirty way… just as a backdrop blur filter using the Class editor to a class called .modal
Hi,
Juste tried quickly and nope :
.modal {
backdrop-filter: blur(2000px);
}
As earlier with other styles token a little randomly in Inspector…
Fearing it’s bit more complex with Bootstrap (also image with Z-index 1 and modal’s styles in many ways with Z-index 999999, the image stays in front, “nearer to us”).
Finalizing things and I’ll see all that more “deeply” ; btw thanks.
Lol this is freestyle 
Ok I missunderstood…
Ok with Webkit…
-webkit-backdrop-filter: blur(27px);
Ed 1
Btw it’s ugly with blur bg 
Ed 2
In case (beginners…) : Blocs Modal Background Blur Backdrop Filter
It is possible to add filters with .modal style indeed, and for more flexibility (different modals…) also directly to the ID (to be added) of the Modal :
#NameOfID {
-webkit-backdrop-filter: blur(9px);
-moz-backdrop-filter: blur(9px);
-ms-backdrop-filter: blur(9px);
-o-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
}
And for playing effect with mouse out/hover (of the background, not the modal, even with the ID of the modal popup - the “subject” is the Backdrop :
#NameOfID:not( :hover ) {
...
}
#NameOfID:hover {
...
}
( Better with transition :
-webkit-transition:450ms ease-in-out;|
-moz-transition:450ms ease-in-out;|
-ms-transition:450ms ease-in-out;|
-o-transition:450ms ease-in-out;|
transition:450ms ease-in-out;|
)
Btw…
Something like this:
Yes it does, use the class editor (and you will get the webkit reference as well). As mentioned above.
If you trigger it by applying a class using an event listener for page load it will work well with anyone with a different connection speed.
Not really. There is also a modal backdrop element you will see in the inspector when a modal is active. It’s towards the end of the html.
Also Bootstrap has a structure to z-index. You don’t need to throw 9999999 at everything.
Remember not every code reference you find online is for Bootsrap 5.
Eg. Modal is 1055 and the Modal Backdrop is 1050
You can read about it here
Lol just discovered (omfg why didn’t I thought about it at start ?!), again if it helps : No code Blocs Modal Background Blur Backdrop Filter
It isn’t super clean with border that don’t fit perfect to browser border, but it is already great for creating with lots of filter possibilities as bg etc.
@PeteSharp Ok thank you I’ll look at this ; i intend to make a kind of 3D perspective scene with some modals ( img > modal > img > body, if I succeed 
)
First, create a CSS class for your background image with the desired blur and darkening effect. Let’s call it blurred-background
Ex:
.blurred-background {
position: relative;
background-image: url('your-image.jpg'); /* Replace with your image URL */
background-size: cover;
filter: blur(5px); /* Adjust the blur amount as needed */
transition: filter 1s; /* Adjust the transition timing as needed */
}
.blurred-background::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Adjust the darkness level here */
z-index: 1;
}
Then apply this class to the bloc you want to have the blurred background effect.
<div class="blurred-background">
<!-- Your content goes here -->
</div>
Now, add JavaScript to remove the blur effect and dark overlay after your header text fades in.
document.addEventListener('DOMContentLoaded', function () {
// Add a delay based on your header text fading in
setTimeout(function () {
const blurredBackground = document.querySelector('.blurred-background');
blurredBackground.style.filter = 'blur(0)';
blurredBackground.style.transition = 'filter 1s';
blurredBackground.querySelector('::before').style.backgroundColor = 'rgba(0, 0, 0, 0)';
}, 2000); // Adjust the delay (in milliseconds) based on your header text animation timing
});
I hope it helps.
1 Like
Thanks guys!. I will give it a shot with your suggestions. BTW I want the image to load on screen in focus and then as the text fades in, the background image blurs a bit the way the human eye will blur the background in order to focus on what is nearer.