Skip to content
OverviewSolutions
35
Comments
2
Allan Abok
@abok-cymk

All comments

  • yekta_akhavan•170
    @yektaakhavan
    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?"

    Time tracking dashboard

    #fetch
    3
    Allan Abok•680
    @abok-cymk

    You have a typo on your icon names

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

  • yekta_akhavan•170
    @yektaakhavan
    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?"

    Time tracking dashboard

    #fetch
    3
    Allan Abok•680
    @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