asked on 11/5/2018

hover not working on html

Hi Experts,

Hover style is not working normally, where as on developer tools on chrome browser with force element state hover I am able to see the results not on normal mouse over or hover

the style I am using is

.cardoverlay{
  display:none;
}

.cardoverlay:hover {
    opacity:0.5!important;
    position:absolute!important;
    display:block!important;
}

Open in new window

the html I am using is

 <img src={thumbnail} alt={i.title} className="card-img card-img-top"
            style={{width:"300px",position:"relative",height:"260px",top:"0",left:"0",
             "object-fit":"cover"}}/>
             <img src={getOverlayImage(LOCAL_URL_PREFIX,i.type)} className="cardoverlay" style={{width:"300px",height:"260px",top:"0",left:"0",
                    position:"relative",opacity:"0.5",}}/>

Open in new window

Please see the below image as reference
with force element style hover

without hover forced hover on dev tools and with normal hovering

Please help me in resolving this issue.

With Many thanks,

Bharath AK

* css3 HTML Chrome * HTML 5 Web Browsers

Last Comment

coder

11/6/2018

Chris Stanyon

11/5/2018

You've added the hover to .cardoverlay, which is set to display:none. Because it's set to display:none; it's not visible. so a user can't hover over it! You'll need to add the hover to something that is visible, such as the div class="card paper"

div.paper:hover .cardoverlay { 
    opacity:0.5!important;
    position:absolute!important;
    display:block!important;
}

Open in new window

Now the cardoverlay will show up when you hover over the div

coder

11/5/2018

ASKER

Hi Chris,

I don't want to display normally, I want to display the image while hovering only with opacity. Please provide me an idea on how to display only while hovering.

With Many thanks,
Bharath AK

Chris Stanyon

11/5/2018

Hi,

Not sure I understand. I've already provided the code to do that. The original code you had wouldn't work, because your were trying to activate the hover on an element that was set to hidden

ASKER CERTIFIED SOLUTION

coder

11/6/2018

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial