1

I have text that should fade in on hover and fade out when the mouse leaves the bounding box. For that I used the following CSS:

.project h3 {
    /* Other styles */
    opacity: 0; /* Set the default opacity to 0 */
}
  
.project:hover h3 {
    opacity: 1; /* Set the opacity to 1 when hovered over */
    transition: opacity 0.3s ease; /* Add a smooth transition for the opacity change */
}
  
.project:not(:hover) h3 {
    transition: opacity 0.6s ease; /* Add a slower transition for the opacity change when not hovered over */
}

When I load the page, I want it to be invisible from the start, but right now it starts opaque and fades out immediately. ChatGPT keeps suggesting to just remove the ".project:not(:hover) h3" style and is driving me insane. How can I keep the fade-out when I move my mouse away and still have it be invisible from the start?

The html context is literally just a div with the class "project" and that h3 in it, i created a separate test project to strip it down, the problem persisted.

Anonymous Nyan Cat
  • 43
  • 3
  • Does this discussion help? https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load – Ivan Beliakov Dec 23 '22 at 15:58
  • My first guess would be that it's related to when the styles load. If that's the case, adding an inline style of `opacity: 0` to the `h3` would solve that. – H K Dec 23 '22 at 16:08
  • I cannoot reproduce this problem. Could you put your code into a snippet and check that it does indeed show the problem. See https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. My guess is that your CSS is loading after the HTML as suggested by @HK – A Haworth Dec 23 '22 at 18:53

0 Answers0