Background-filter glitch causing display issues

I'm having trouble with the backdrop-filter property in my code. The filter I added doesn't seem to be working and I can't figure out why.

Here's the snippet of my code :

.army_selection
    {
    margin: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    min-width: 300px;
    max-width: 300px;
    height: 400px;
    
    background-size: cover;
    background-position: center;
    
    transition: 0.1s;
    }
    
    .army_selection:hover :nth-child(1)
    {
    opacity: 1;
    
    -webkit-backdrop-filter: brightness(25%);
    
    transition: 0.1s;
    }
<div id="army1" class="army_selection">
  <div class="army_selection_bloc">
    <p class="army_text">Ultramarines</p>
  </div>
</div>

htmlcss

Answer №1

It should be noted that this property is currently in an experimental stage and its support is limited.

You can find more information on MDN

If you want to use this feature in Chrome version 47, you will need to 

Enable Experimental Web Platform Features
.

Before implementing this property, carefully consider the limited support it has. It may be possible to achieve a similar effect without using this particular property. You can find an example of a workaround here.

Answer №2

It seems like you're trying to achieve a similar result with this solution?

Here's a workaround that might not be exactly what you had in mind, but hopefully, it will be helpful.

.military_selection {
    margin: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    min-width: 300px;
    max-width: 300px;
    height: 400px;
      background-color: rgba(0,0,0,0);
    background-size: cover;
    background-position: center;
    
    transition: background-color .2s;
}
    
.military_selection:hover {
  background-color: rgb(0, 0, 0, 0.25);
}
<div id="military1" class="military_selection">
  <div class="military_selection_bloc">
    <p class="military_text">Ultramarines</p>
  </div>
</div>

Answer №3

.army_selection {
    margin: 20px;
    margin-left: 10px;
    margin-right: 10px;
    min-width: 300px;
    max-width: 300px;
    height: 400px;
      opacity:-2;
      background-color: rgba(0,0,0,0);
    background-size: cover;
    background-position: center;
    
    transition: background-color .5s;
}
    
.army_selection:hover {
  background-color: rgb(0, 0, 0.8, 0.25);
}
<div id="army1" class="amySelection">
  <div class="army_selection_bloc">
    <p class="army_text">Ultramarines</p>
  </div>
</div>

.armySelection {
    margin: 20px;
    margin-left: 10px;
    margin-right: 10px;
    
    min-width: 300px;
    max-width: 300px;
    height: 400px;
      background-color: rgba(0,0,0,0);
    background-size: cover;
    background-position: center;
    
    transition: background-color .2s;
}
    
.armySelection:hover {
  background-color: rgb(0, 0, 0, 0.25);
}

Answer №4

After some trial and error, I managed to come up with a solution, although it may not be the most elegant one.

Below is the HTML section that includes the army selection block:

<div class="army_selection_bloc">
    <div id="army1" class="army_selection"></div>
    <div class="army_text_bloc">
        <p class="army_text">Space marines</p>
    </div>
</div>

And here is the corresponding CSS code:

.army_selection_bloc
{
    margin: 20px;
    margin-left: 10px;
    margin-right: 10px;

    min-width: 300px;
    max-width: 300px;
    height: 400px;
}

.army_selection
{
    z-index: 2;
    position: relative;
    top: 0px;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    transition: 0.1s;
}

.army_selection_bloc:hover .army_selection
{
    box-shadow: 7px 7px 60px black;

    filter: brightness(25%);

    transition: 0.1s;
}

.army_selection_bloc:hover .army_text_bloc
{
    opacity: 1;

    transition: 0.2s;
}


.army_text_bloc
{
    z-index: 3;
    position: relative;
    top: -400px;

    width: 300px;
    height: 400px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 0;

    transition: 0.2s;
}

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

What can be done to resolve the issue of text not displaying correctly on the screen?

I am attempting to position text to the right of a card header in my project, but for some reason the working example on fiddle is not working. I am using Bootstrap 4. Check out the example here. Here is what I am seeing in my app: https://i.sstatic.net ...

htmlcsstwitter-bootstrap

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference. After conducting thorough research, I attempted to ...

htmlcssbootstrap-4bootstrap-modal

assigning a label to a DropDownList

When attempting to place a label in front of a DropdownList, the dropdownlist appears on the next line. I have tried various suggestions from different sources but have not been able to find a solution. Here is the simple code I am currently using: Group ...

jqueryhtml

Eliminating table rows using jQuery

In order to remove table rows from the table below: <div id="tabel"> <table class="tg"> <thead> <tr><td colspan=3>How can I delete rows from a table using jQuery</td></tr> <t ...

jqueryhtmlhtml-table

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below. <div style="margin-top:0.5vh;"> <div style="height:200px;border:1px solid red;overflow:au ...

javascripthtmlcssangularjs

The Bootstrap width is spilling over and not conforming to the content of the form

I'm facing an issue with content overflow on multiple forms within a webpage that uses Bootstrap 4. I can't seem to find a solution to make the width of the forms fit the content properly. Take a look at this picture showing one of the simpler fo ...

htmlcssbootstrap-4overflow

Showing Information on Website using Node.js (Without the Use of Frameworks)

Currently, I am working with a Node.js webserver to fetch data from a MySQL Server. The challenge is now to display this fetched data on the frontend as HTML without relying on any third-party Node.js or JavaScript frameworks. As someone new to web server ...

javascripthtmlmysqlnode.jsfetch

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...

cssnpmlaravel-mixtailwind-csslaravel-8

What is the most optimal method for incorporating inline SVG into your code?

As I work on my webpage, I face the challenge of including numerous SVG icons in the HTML. To avoid slowing down the page with additional HTTP requests, I have decided to embed the SVG code directly like this: <svg xmlns="http://www.w3.org/2000/svg" wi ...

htmlsvg

By simply clicking a button in a React component, I aim to alter the font style of the text

function makeTextBold() { const boldText = document.querySelector('.form-control'); boldText.style.fontWeight = 'bold'; setText(boldText); } When I click the button, it redirects me to a blank page in the browser. ...

javascriptcssreactjs

Retrieving table information using javascript

My goal is to retrieve information from the <td> elements within the following HTML table: <table class="datadisplaytable" summary="This table lists the scheduled meeting times and assigned instructors for this class.."> <caption class="cap ...

javascripthtml

Adjusting the styles of dual navigation bars in the Adelle theme

I encountered an issue where my second navigation menu (nav2) is adopting the appearance of the first menu (nav1), and I'm having trouble resolving it. However, the content of the second menu is different. Snippet from header.php: <nav class="na ...

phpcsswordpress

Is it possible to store CSS and JS files within an Android app that utilizes a webview, similar to Phonegap

Looking to store CSS and JS files for an Android app that utilizes a webview. Want to avoid repeated server requests by storing the files locally on the phone, similar to how PhoneGap operates. Are there any resources or documentation available to help a ...

javascriptandroidcsscachingcordova

The location layer on my Google Maps is not appearing

For a school project, I am working on developing a mobile-first website prototype that includes Google Maps integration. I have successfully added a ground overlay using this image, but I am facing issues with enabling the "my location layer". When I tried ...

javascripthtmlgoogle-mapslocationmaps

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...

htmlcsstwitter-bootstrap

I'm baffled as to why the page is not loading despite my best efforts. Could someone please help identify where I went wrong?

My page isn't loading properly and I can't seem to figure out what's wrong. The error message that appears is: Page not found (404) Request Method: GET Request URL: http://127.0.0.1:8000/deals/2015/03/first-lady/ Django 1.6 Python 2.7 ...

pythonhtmldjango

"Styling mysteriously disappears from Vue project when deployed to production

While running my docker image and routing the requests through nginx, I encounter issues with the styling. Although I can see all the html-tags and locate the css and js files in the network tab of the browser, the styling is not being applied. Even thoug ...

cssdockernginxvue.jsproxy

Insert a new row into the table with a value that is taken from the input fields on the form

view image details I am working on a form that consists of 4 fields: Name, Last name, email, and role. There is also a button. When the button is clicked, the input from the above form should be added as a new row in a table below. ...

htmlangularforms

The jQuery code stops functioning once the identical HTML content is loaded through AJAX

Before you mark my question as a duplicate, I have already attempted the solutions provided by similar issues, but unfortunately none of them have resolved my problem. Here is my specific issue: I am working with a fragment that includes the following inpu ...

htmlajaxjqueryevent-handling

Refusing to invoke a Python function from JavaScript with the likes of an e

I'm having an issue with a toggle feature in my Eel application. Unfortunately, when I try to print "Test" to the terminal, it doesn't seem to work as expected. <div class="container-afk"> <label class="toggle_box" ...

javascriptpythonhtmleel