How to make modal dialog with blur background using Twitter Bootstrap?

You need to alter the structure of your document first. It should look something like this <body> <div class=”supreme-container”>all your content goes here except for the modal</div> <div id=”myModal” class=”modal fade”>This is your modal.</div> </body> And then in css body.modal-open .supreme-container{ -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); }

CSS blur on background image but not on content [duplicate]

jsfiddle .blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: “”; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit-filter: blur(10px); -o-filter : blur(10px); transition : all 2s linear; -moz-transition : all 2s linear; -webkit-transition: all 2s linear; -o-transition : all 2s linear; …

Read more

FFmpeg: How to convert vertical video with black sides, to video 16:9, with blurred background sides

I solved! ffmpeg -i input.mp4 -lavfi ‘[0:v]scale=ih*16/9:-1,boxblur=luma_radius=min(h\,w)/20:luma_power=1:chroma_radius=min(cw\,ch)/20:chroma_power=1[bg];[bg][0:v]overlay=(W-w)/2:(H-h)/2,crop=h=iw*9/16’ -vb 800K output.webm Input: https://www.youtube.com/watch?v=17uHCHfgs60 Output: http://www.youtube.com/watch?v=CgZsDLfzrTs

How to apply blur to a UIView?

This should work. I commented in the code to help you understand what’s going on: //To take advantage of CIFilters, you have to import the Core Image framework #import <CoreImage/CoreImage.h> //Get a UIImage from the UIView UIGraphicsBeginImageContext(myView.bounds.size); [myView.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); //Blur the UIImage with a CIFilter CIImage *imageToBlur = [CIImage imageWithCGImage:viewImage.CGImage]; …

Read more

how to make the blur effect with react-native?

Now you can do this without any library using the prop: blurRadius. E.g <Image style={styles.img} resizeMode=”cover” source={imgSrc} blurRadius={1} /> Explanation: the number(1) means the amount of blur you want to apply on the image, the higher the number, the blurrier the image. Unfortunately, this doesn’t work on Android yet (RN 0.40.0). Nevertheless, it could be …

Read more

Blur effect on a div element

I think this is what you are looking for? If you are looking to add a blur effect to a div element, you can do this directly through CSS Filters– See fiddle: http://jsfiddle.net/ayhj9vb0/ div { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); width: 100px; height: 100px; background-color: #ccc; }