Is there a way to use CSS to create a blurred effect around a specific element?

As an illustration, consider taking a look at this specific page. How could one go about blurring all elements on the page except for a selected element while keeping that element in focus?

If the entire content area is blurred, the focused element will also be affected by the blur (as you can't unblur a child of a blurred parent). It's not practical to individually determine which elements should be blurred and which shouldn't. Additionally, the element should remain within the content area without any HTML transformations.

The desired outcome would transform from this: https://i.sstatic.net/fbTHD.png

To this using only CSS: https://i.sstatic.net/QDtnq.png

While it may seem simple to just overlay with a dark layer using absolute positioning and give the focused element a relative position with a higher z-index, unfortunately, blurring that dark overlay does not affect the content behind it: https://i.sstatic.net/Gh7a3.png

htmlcssblur

Answer №1

To achieve the desired effect, remember to target the container element being hovered over and apply a :not(:hover) to it.

Check out this codepen example I created: https://codepen.io/amandaIaria/pen/vqdONB. I converted it from SCSS to CSS, simplifying unnecessary elements for clarity. While it may not cover all scenarios, it demonstrates my approach.

.project-container:hover .project:not(:hover) {
  // Consider adding overflow as a precaution
  overflow: hidden;
}

// This CSS rule applies a blur effect to content when hovering over the container but NOT on the specific project being hovered.

.project-container:hover .project:not(:hover) .project__content {
       // Various blur effects
        -webkit-filter: blur(5px); 
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px); 
        filter: url(#blur); 
        filter: blur(5px);   
        filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3') grayscale(100%);
}

Answer №2

The problem was resolved using a backdrop-filter. Special thanks to @Sheraff and @epascarello23 for the assistance.

https://i.sstatic.net/qAMv2.png

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

Tips for creating responsive Math Latex

Check out this link to my website page. Also, take a look at this other link. While using Bootstrap, I've noticed that all content is responsive except for the equations in the first link and the Matrix multiplication example in the second link towar ...

csstwitter-bootstrapresponsive-designlatex

Learn how to use jQuery's .addClass() method to specify custom CSS styling

One of my website elements is a div that I want to hide when clicked. The element uses Bootstrap4 and has a CSS style called "d-none" which hides the element by setting display to none. To achieve this functionality, I added the following code in my .js f ...

javascriptjqueryhtmlcssbootstrap-4

Custom theme causing icons to not appear on screen

I've been experimenting with jQuery mobile and designed a custom theme using themeroller. Following the instructions, I added the necessary links in the <head>: <link rel="stylesheet" href="themes/mycustomtheme.min.css" /& ...

jqueryhtmlcssjquery-mobileicons

What is the code to create rainbow-colored buttons in a continuous loop on a webpage using HTML?

My current project is built using the Jango framework. {% for tag in tags %} <div class="btngroup" role="group" aria-label="tags"> <h3><a href="{{ tag.get_absolute_url }}" class="btn btn-primary">{{tag.title}}</a></h3> ...

javascriptpythonhtmlcssdjango

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

javascriptjqueryhtmlcss

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. https://i.sstatic.net/2FQkD.png In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span ...

htmlcss

Getting the css property scaleX with JQuery is as simple as executing the

I am struggling to print out the properties of a specific div element using jQuery. My goal is to have the different css properties displayed in an information panel on the screen. Currently, I am facing difficulties trying to show scaleX. Here is my curr ...

javascriptjqueryhtmlcss

Mobile devices not showing the Navbar bootstrap menu

My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...

phpcsstwitter-bootstrap-3menunav

Adding additional information to the end of a table using JQuery

<table id="myTable0" name="myTable0"> <tbody> <tr> </tr> </tbody> </table> <table id="myTable1" name="myTable1"> <tbody> <tr> </tr> </tbody> </table> I am seeking a solution in JQuer ...

javascriptjqueryhtml

Why won't the horizontal scroll bar function properly even after I specified a fixed width for the parent div?

My horizontal scrollbar is not functioning as expected in my React app. I am currently working on a TableData component and here is the rendered JSX code: <table> <div className="co-table"> <div className="co-table__ ...

htmlcsssassscrollbar

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

I have a program that calculates the total price of products based on a specified quantity and updates an HTML table with these values. To demonstrate this, I am constantly taking input using an infinite loop. <!DOCTYPE html> <html> ...

javascripthtml

Styling Issues with Angular Code within App-Root Element

I am encountering an issue with my Angular 7 application during initialization. I have a class named "testing" that simply changes the text color to red. I tried placing the class in the index.html file within a style tag, as well as in the styles.scss fil ...

htmlcssangularbootstrap-4initialization

Interactive jQuery feature for dynamic search suggestions across multiple entries

Here is the HTML code snippet I am working with: <input name="data[Content][0][name]" type="text" class="content_name_1" id="content_name"> <input name="data[Content][1][name]" type="text" class="content_name_2" id="content_name"> ...

phpjqueryhtmlajaxjquery-autocomplete

Incorporating live text into a tag while arranging items by price in both ascending and descending order

I recently added a button to my online shop that allows users to sort products by price, even though I don't fully understand the underlying JavaScript code. I want to enhance this button by updating the text to indicate whether the sorting order is ...

javascripthtmljquerysorting

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

Tips for implementing HTML5 validation followed by automatic redirection to a different page

I'm new to web development and struggling with how to make a button both validate inputs and redirect to another page. Using the onclick = "" function, I can validate inputs like emails and telephone numbers, but I'm having trouble making it so t ...

javascriptphpjqueryhtmlvalidation

Adjust the positioning of the navbar-brand to the right within bootstrap 4

Here is what I currently have: <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarS ...

htmltwitter-bootstrapcssbootstrap-4

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...

javascripthtmlhtml5-canvas

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

javascripthtmlcssimageobject-position