hover not working on html

coder
coder used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Chris StanyonWebDev
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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
coderdeveloper

Author

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 StanyonWebDev
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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
developer
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial