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

coder
coder used Ask the Experts™
on
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;
   }
}

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

Open in new window


Please help me in resolving this issue.

With Many thanks,

Bharath AK
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
developer
Commented:
Hi Experts,

      I had opened all svg file and fill the path to white color fixed the problem.

With many thanks,

Bharath AK
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
This EE article discusses 4 different ways to create an image overlay similar to what you require.

https://www.experts-exchange.com/articles/28823/4-Methods-for-creating-image-overlays-in-HTML-using-CSS-and-PHP-GD2.html
coderdeveloper

Author

Commented:
Hi Julian,

       Thanks for providing me the links.  The problem is now solved.

With Many thanks,
Bharath AK
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome - if you have no more questions on this could you close the question.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial