What is the technique for adding a blur effect to the top and right side of a div element?

Here is a link to my fiddle:

https://jsfiddle.net/aod4rmx8/

.background{
    position: absolute;
    left: 0;
    width:50%;
    right: 0;
    bottom: 0;
    top:0;
    background-color: #000;
    /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/

-webkit-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
-moz-box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
box-shadow: 200px 1px 300px 200px rgba(0,0,0,0.75);
}

I am looking to add a blur effect on the top and right side of the black background. This is the desired result I want to achieve:

https://i.sstatic.net/B22kF.jpg

I would like to have a slight shadow on the image at the right side, as well as a blur on the edges of the right and top sides of the div with the background color. Any suggestions on how to accomplish this?

css

Answer №1

It seems to me that you were inquiring about how to implement a blur effect similar to this,

.privacy_settings {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

Answer №2

.gdpr_compliance{
float: left;
    width: 100%;
    padding: 10px 0px;
    padding-bottom: 30px;
    position: relative;
   background-image: url(https://example.com/image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 400px;

}

.privacy {
    padding: 50px;
    position: absolute;
    left: 0;
    width: 40%;
    right: 0;
    bottom: -10px;
    top: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transform: translate3d(0px, -5px, 10px);
    
  border: solid 1px #000;
  padding-left: 1200px;
  box-sizing: border-box;
  box-shadow: inset -900px 0 0px 10px #000;

}
<div class="gdpr_compliance">
<div class="privacy"></div>
</div>

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

Creating a disabled HTML button that reacts to the :active CSS pseudo class

CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...

htmlcsscss-selectorspseudo-class

Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden. .left-bg{ backgro ...

javascriptcsshtml

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

Create shortened class names

Is there a way to abbreviate class names in HTML and CSS files? For example, I currently have the class name: .profile-author-name-upper And I would like to change it to something shorter like: .p-a-n-u or .panu Any suggestions on how to achieve thi ...

htmlcssgruntjscss-selectors

Having trouble tackling whitespace removal in the DIV? Usual methods seem ineffective?

I am currently working on a vertical-align "3 block" design and trying to eliminate the white space between the divs. I have experimented with setting the font-size of the body to 0px and then assigning individual font sizes to each child, but this approac ...

htmlcss

React CSS Modules - Adding styles to individual child elements

I'm having difficulty applying CSS styles to each child of a specific tag. I am using CSS modules in conjunction with semantic-ui-react: character.module.css .Character > GridColumn { border: solid 4px red; } character.js import React, {Com ...

cssreactjssemantic-ui-reactcss-modulesreact-css-modules

When the horizontal scroll is turned off, it also disables the functionality of my mobile-friendly

I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...

javascripthtmlcssreactjstailwind-css

When designing a webpage using HTML and CSS, the size of HTML blocks decreases as the page is made smaller

Having an issue with the following: I hope you can help me identify my problem here and I'm not sure why it's occurring. I believe the problem lies in the header and nav sections I initially thought it might be related to the images, but I' ...

htmlcssweb-inspector

Ways to enlarge the parent container and reveal a concealed child element upon hovering without impacting neighboring containers

Currently, I am diligently working on the company service boxes and have a particular need... When hovering over: 1. The parent div should scale up and acquire box shadow without impacting the neighboring service boxes (it should appear to stand out above ...

javascriptjqueryhtmlcss

Autosuggest Feature in Google Maps

Can someone please help me with customizing the width of the input text box and drop down menu using this resource: https://developers.google.com/maps/documentation/javascript/places#places_autocomplete? I'm having trouble figuring it out. ...

google-mapscssgoogle-maps-api-3

Ensuring Equal Padding on Both Sides of a Div by Setting its Width

In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...

jquerycssliquid-layoutcenter-align

Is the use of !important included in Bootstrap 4?

Even though I've positioned the style.css file after Bootstrap, it still isn't working. Upon inspection, I noticed that... https://i.sstatic.net/ay621.png How can I solve this issue? .bg-info{ background-color: #17a2b8 !important; } ...

htmlcsstwitter-bootstrapbootstrap-4css-specificity

Font icon not appearing when toggling the class "before"

I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. ...

jquerycss

Confusion arises when using Materialize CSS for selecting elements

Currently, I am working on an app using Cordova. Within this project, I have incorporated jQuery Mobile's CSS and JS along with Materialize CSS and JS. However, I recently encountered an issue after integrating the Materialize files. Specifically, whe ...

jqueryhtmlcsscordovamaterialize

Begin your journey with Foundation Navigation as it seamlessly transitions from left to right

I am currently working on this navigation: I am trying to modify the behavior of the hamburger menu so that when it is clicked, it slides from left to right instead of its current downward motion. Additionally, I would like to adjust the width of the menu ...

jqueryhtmlcsszurb-foundationnavbar

Overflowing content in a table within a div element

Issue: I am encountering a problem with resizing a table inside a div that contains input elements. When I adjust the browser window size or change to a lower resolution, the div element resizes and scales down, causing a horizontal scroll bar to appear. H ...

htmlcss

Organize my code with CSS styling

Is there a method to organize a css file in the following structure?: a:link { color: red; font-weight: bold; a:hover { text-decoration: none; font-weight: normal } } I would like a regular link to appear underlined and bold, but when hov ...

css

What is causing the input boxes to exceed their container boundaries so drastically?

My plan was to organize 4 input text boxes in 4 equal columns on a single row of the form. Using Bootstrap's grid column classes, I set col--3 for medium and large screens for those four inputs. For small and extra-small sizes, I designated them as co ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How can I use Vue.js @scroll to create a dynamic CSS property?

I am developing a vuejs component for my project and I am looking to implement a zoom functionality on scroll within a div, similar to Google Maps. <div @scroll="zoomOnScroll"> <Plotly :data="info" :layout="layout" :display-mode-bar="false"&g ...

cssvue.js

Troubleshooting problems with printing HTML divs and page breaks caused by using float and position styles

Look at this class: .divDutySlip { width: 90mm; min-height: 120mm; padding: 2mm; /*float:left; position: relative; */ margin: 2mm; border: 1px solid #000000; page-break-inside: avoid; } I've modified two styles. Dis ...

htmlcsspage-break-inside