Link to home
Start Free TrialLog in
Avatar of coder
coderFlag for Australia

asked on

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

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

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

see the sample overlay image I have is

User generated imaged, 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
User generated image

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
ASKER CERTIFIED SOLUTION
Avatar of coder
coder
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of coder

ASKER

Hi Julian,

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

With Many thanks,
Bharath AK
You are welcome - if you have no more questions on this could you close the question.