# Feature OP-9908 - Updated hover behaviour for cards (to make the icons legible when they overlap with attributes)

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-9908

## Planning

| Attribute | Value |
| --- | --- |
| Date | 2021-11-01 – 2022-02-27 |
| Priority | Medium |
| Target versions | 12.1.0 |
| Sprint | 12.1.0 |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

The hover behaviour as specified (and implemented) for cards in <mention class="mention" data-id="40810" data-type="work_package" data-text="#40810">\#40810</mention> is not ideal; dimming the project name systematically to make the blue "i" icon visible creates too much visual noise. We knew this could be an issue, so are proposing an alternate approach that should fix this issue.

### **Acceptance criteria**

  - On hover, apply a background to the area where the icons appear (top right), with the same background colour as the card, with a linear gradient towards transparency on the left edge.
  - Ensure that it is the right colour, depending on if that card is a:
      - regular card (background: *Basic/White*),
      - a closed card (*Basic/Gray 6*),
      - selected card *(Main/Main Light)*

The benefit of this approach is that it works reguardless of what attribute is being "drawn upon" and that when the cards are long enough to not need this system, it is essentially invisible.

### Visuals

*Regular card, no hover*

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27648/content"></div></figure>

*Normal card on hover*

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27649/content"></div></figure>

*Closed card, no hover*

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27650/content"></div></figure>

*Closed card, hover*

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27652/content"></div></figure>