troubleshooting Question

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

Avatar of coder
coderFlag for Australia asked on
* css3JavaScript* HTML 5* ReactJS
4 Comments2 Solutions97 ViewsLast Modified:
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

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

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

see the sample overlay image I have is

current overlay image with black foreground,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
after making the overlay image with white foreground

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;
   }
}

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>);
        });

Please help me in resolving this issue.

With Many thanks,

Bharath AK
SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros