Skip to content
Submitted 28 days ago

Time tracking dashboard

fetch
yekta_akhavan•170
@yektaakhavan
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What specific areas of your project would you like help with?

"How to style the three-dot icon image so that when the mouse hovers over it, it becomes white and the cursor changes to pointer? Is it possible to do such things for an image?"

Code

Please log in to post a comment

Log in

Community feedback

  • Allan Abok•580
    @abok-cymk

    1. Changing opacity on hover

    .ellipsis:is(:hover, :focus) {
opacity: 0.5;
}

    2. Should you use it?

    Yes, but here are important things to consider.

    Pros

    • Simple and fast way to create a hover effect.

    • Doesn’t need extra elements or JavaScript.

    • Good for indicating interactivity (e.g., image is clickable).

    Cons

    • Makes the entire image and its content transparent — even if it contains overlaid text or other elements.

    • Affects child elements' visibility, which can be a problem if your image contains other layered elements (like icons or text).

    • May not be accessible — low contrast might confuse users with visual impairments.

    Alternatives you might prefer

    • Instead of reducing the image's opacity, sometimes it's better to overlay a semi-transparent layer or use filters:

    Option: Use filter

    img:hover {
  filter: brightness(50%);
}

    • Keeps the image visible but darkens it.

    • Can be combined with transitions for smooth effect.

    Marked as helpful
  • Dusvy_M•520
    @dovelm

    very good job

  • Allan Abok•580
    @abok-cymk

    You have a typo on your icon names

    E.g "/icon-Social.svg" instead of "/icon-social.svg"

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord