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

LVL 1

coderdeveloperAsked: 2018-11-04

Who is Participating?

Experts Exchange Solution brought to you by

Enjoy your complimentary solution view.

Get this solution by purchasing an Individual license! Start your 7-day free trial.

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.

LVL 54

Chris StanyonWebDevCommented: 2018-11-05

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

LVL 1

coderdeveloperAuthor Commented: 2018-11-05

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

LVL 54

Chris StanyonWebDevCommented: 2018-11-05

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

LVL 1

coderdeveloperAuthor Commented: 2018-11-05

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