not able to change image to white foreground with transparent opaque background

Hi Experts,

       I am not able to make a transparent opaque background with white foreground as shown in the below image.  

What I currently able to do and have is with image overlay


What I need is the  book overlay image (sample) has white foreground as seen below


I have many overlay images(book, peridiocals, images, audio, video, maps etc) all with black foreground

see the sample overlay image I have is

d, see the image after changing the foreground to white, it has become transperent overlay is not at all displayed


I had tried inverting foreground color to white for the overlay image, but it is not displaying as required


current css is

.cardoverlay{
   visibility:hidden;
}

.base:hover {
    opacity:0.5!important;

    .cardoverlay {
        visibility: visible!important;
        position:absolute!important;
        display:block;
    }
}

.base:focus {
   opacity:0.5;

   .cardoverlay {
       visibility: visible!important;
       position:absolute;
       display:block;
   }
}

Select allOpen in new window

reactjs code is

 return (
          <div  key={i.id} className={`card base paper ${this.props.selected == i.id ? ' selected': ''}`}
                 style={{width:dimension, height:dimension+50,overflow:"hidden"}} onClick={() => this.props.actions.viewItem(i)}>
              <img src={thumbnail} alt={i.title} className="card-img card-img-top"
            style={{width:"300px",height:"260px",
             "object-fit":"cover"}}/>
             <img src={getOverlayImage(LOCAL_URL_PREFIX,i.type)} className="cardoverlay" style={{width:"200px",height:"160px",position:"absolute",
                   top:"50",left:"70",opacity:"0.5",}}/>
             <img src={i?.source?.brand} className="card-img-top" alt={i.source} style={{position:"absolute", left:"270px",
                top:"230px", bottom:"250px", right:"300px", width:"30px", height:"30px"}}/>
            <div className="card-body card-text base-text">
               <p style={{fontFamily:"verdana,sans-serif", fontSize:"0.75rem",fontStyle:"italic"}}> {restrictTo40Chars(i.title)} </p>
               <p style={{fontFamily:"verdana,sans-serif", fontSize:"0.75rem",fontStyle:"italic"}}> {display2ndLine(date,i.type)} </p>
            </div>
          </div>);
        });

Select allOpen in new window

Please help me in resolving this issue.

With Many thanks,

Bharath AK