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
image1.png

without hover forced hover on dev tools and with normal hovering

image2.png
Please help me in resolving this issue.

With Many thanks,

Bharath AK
LVL 1
Bharath A.KAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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
Bharath A.KAuthor Commented:
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 StanyonWebDevCommented:
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
Bharath A.KAuthor Commented:
Hi Chris,

      I am able to fix this.  I had created a parent div and image (as child) within with visibility hidden.  On hover of the parent div, I had made visibility of the image to visible and applied opacity.  Now it is working fine.  

Thanks for pointing the problem on display none.

With many thanks,

Bharath AK

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
css3

From novice to tech pro — start learning today.