asked on

how to overlay with a transperent image for an image and applying transperency for the whole card(bootstrap) in html and css?

Hi Experts,

I have the following requirement on HTML. Please see the below screenshot for reference.

The first thumbnail is the normal thumbnail, the second one is with the mouseover or hover

the image I had to implement is, as a card in bootstrap.

on mouse over it overlay an image to the center of the image and it should become transparent for the whole card( that should include both the image and text) of the card.

There are two things
a) one is to overlay an image in the center for the image on the card. (overlay image has a transparent background)
b) to become transparent or opaque for the entire card (which includes both image and text).

Please help me in implementing this.

Thank you,

coder

ASKER

Hi

I had implemented this with the following logic

<div class="base">
  <div>
      <img src={thumbnail} alt={i.title} className="card-img card-img-top" style={{width:"300px",height:"260px","object-fit":"cover"}}/>
      <img src="book.png" className="cardoverlay"
               style={{width:"180px",height:"140px",position:"absolute", top:"60",left:"70"}}/>
  </div>
  <div className="card-body card-text base-text">
               <div style={{height:"40px",margin:"0", padding:"0"}}>

               <p style={{fontWeight:'bold',fontSize:12,paddingLeft:10,marginBottom:0,
                    textAlign:'left'}}> {restrictTo70Chars(i.title)} </p>
               </div>

               <p style={{marginLeft:0,paddingLeft:10,marginTop:0,fontWeight:'bold',fontSize:10,textAlign:'left',
                        }}> {display2ndLine(date,i.ntdl_type,i.tabled_paper)} </p>
   </div> 
</div>

css

.cardoverlay {
  visibility: hidden; }

.base:hover {
  opacity: 0.3 !important; }
  .base:hover .cardoverlay {
    visibility: visible !important;
    position: absolute !important;
    display: block; }

.base:focus {
  opacity: 0.3 !important; }
  .base:focus .cardoverlay {
    visibility: visible !important;
    position: absolute;
    display: block; }

Open in new window

The above is code is from reactjs sorry for improper syntax.

But it is not too dark see this image how it is become, it is not dark how to make it darker?

Please suggest how to make it darker

Julian Hansen

This EE article discusses some of these concepts.
https://www.experts-exchange.com/articles/28823/4-Methods-for-creating-image-overlays-in-HTML-using-CSS-and-PHP-GD2.html

Take a look at the above and then post back if you have any specific questions.

coder

ASKER

Hi Julian,

I had gone through the above article. I am doing the overlay by absolute positioning of the second image on the div,

What I want is opaqueness for the parent div (bootstrap card - which has first image and text). I am able to make opaque on hover or focus, But it is not darker. I had tried color:rgba(1,1,1,0.9) on hover and focus instead of opaque, it has no impact, it is not darker.

<div class="base">
  <div>
      <img src={thumbnail} alt={i.title} className="card-img card-img-top" style={{width:"300px",height:"260px","object-fit":"cover"}}/>
      <img src="book.png" className="cardoverlay"
               style={{width:"180px",height:"140px",position:"absolute", top:"60",left:"70"}}/>
  </div>
  <div className="card-body card-text base-text">
               <div style={{height:"40px",margin:"0", padding:"0"}}>

               <p style={{fontWeight:'bold',fontSize:12,paddingLeft:10,marginBottom:0,
                    textAlign:'left'}}> {restrictTo70Chars(i.title)} </p>
               </div>

               <p style={{marginLeft:0,paddingLeft:10,marginTop:0,fontWeight:'bold',fontSize:10,textAlign:'left',
                        }}> {display2ndLine(date,i.ntdl_type,i.tabled_paper)} </p>
   </div> 
</div>

Open in new window

.cardoverlay {
  visibility: hidden; }

.base:hover {
  //opacity: 0.3 !important; 
  color:rgba(1,1,1,0.4)!important;
  }
  .base:hover .cardoverlay {
    visibility: visible !important;
    position: absolute !important;
    display: block; }

.base:focus {
  //opacity: 0.3 !important; 
  color:rgba(1,1,1,0.4)!important;
  }
  .base:focus .cardoverlay {
    visibility: visible !important;
    position: absolute;
    display: block; }

Open in new window

Please suggest what can be done to make it darker on hover or focus

Thank you

Julian Hansen

Can you post rendered code - it looks like you are using HandleBars or some other templating library which makes your code difficult to replicate. Either post a link to a page that shows the problem or post the rendered HTML here - a link would be preferable.

coder

ASKER

Hi Julian,

the url is http://*.*.*.*. it is running as a docker container.

Thank you,
Bharath AK

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial