Filter brightness and opacity not working when running in production build

Question

I am making my first personal website and ran into an issue.

I have created some cards which initially start off small, and contain a background. When the cursor hovers over a card, it expands, the background darkens and white text appears.

Here is an example below:

Below is the JSX and CSS code:

    import React from 'react';

import './galleryPanel.css'

function galleryPanel({image, title, text}) {
    return (
        
       <div className="img-box" style={{backgroundImage: `url(${image})`}}>
           <div className="filter-div"/>
            <div className="gallery-content">
                    <h3>{title}</h3>
                    <p1>{text}</p1>
            </div>
            
       </div>
    )
  }
  
  export default galleryPanel

.img-box{
    width: 100px;
    height: 500px;
    margin: 30px;
    border-radius: 50px;
    box-shadow: 0px 0px 15px -5px;
    background-size: cover;
    background-position: center;
    position:relative;
    transition: width 0.5s;
    
}

.filter-div{
    width: 100px;
    height:500px;
    filter: brightness(50%);
    border-radius: 50px;
    opacity: 0%;
    position:relative;
}



.img-box:hover .filter-div{
    width: 300px;
    height:500px;
    background-color: #ffff;
    opacity: 90%;
    z-index: 5;
    transition: width 0.5s;
}


.img-box h3{
    position:absolute;
    left: 30px;
    top: 10px;
    opacity: 0;
    transition: bottom 0.5s;
    color: #ffff;
    
}

.img-box p1{
    position:absolute;
    left: 30px;
    top: 100px;
    opacity: 0;
    transition: bottom 0.5s;
    color: #ffff;

}



.img-box:hover {
    width:300px;
    cursor:pointer;
    
}



.img-box:hover h3{
    opacity: 1;
    color: #ffff;
    z-index: 10;
    
}

.img-box:hover p1{
    opacity: 1;
    color: #ffff;
    z-index: 10;
    
}

@media screen and (max-width: 980px) {


    .img-box{
        width: 100px;
        height: 200px;
        margin: 30px;
        border-radius: 50px;
        box-shadow: 0px 0px 15px -5px;
        background-size: cover;
        background-position: center;
        transition: width 0.5s;  
    }

    .filter-div{
        width: 100px;
        height:100px;
        position:relative;
    }

    .img-box:hover .filter-div{
        width: 300px;
        height:200px;
        cursor:pointer;
        background-color: #ffff;
        opacity: 90%;
        z-index: 5;
        transition: width 0.5s;
    }
}

To summarize the above code, I have placed a div called filter-div in front of the background and behind the text and set filter: brightness (50%). When the cursor hovers over the img-box the opacity of this div goes from 0% to 90%

When developing this, I used the command npm start to check if everything is working as it should.

The problem started when I used the commands npm run build and serve -s build to check if the sizes were appropriate for smaller screens.

This was the result:

It seems as if the filter or opacity is no longer changing.

When inspecting the element I saw that when hovered the opacity is set to 1%? While inspecting, if I edit this value back to the original 90%, Everything works fine:

I tested this on Chrome and Edge and results were the same.

If anyone could steer me towards a possible solution I would be grateful

Answer 1

Found out that if I use percentages like I did in the CSS the opacity on the production build will be set to 1%.

The way around this is to use decimals such as 0.90 to achieve a 90% opacity.