Avatar of coder
coderFlag for Australia

asked on 

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
User generated image

without hover forced hover on dev tools and with normal hovering

User generated image
Please help me in resolving this issue.

With Many thanks,

Bharath AK
* css3HTMLChrome* HTML 5Web Browsers

Avatar of undefined
Last Comment
coder
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

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
Avatar of coder
coder
Flag of Australia image

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
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

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
Avatar of coder
coder
Flag of Australia image

Blurred text
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
HTML
HTML

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo