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 &quot;i&quot; 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 Begin of the insertionright),End of the insertion Begin of the deletion left),End of the deletion 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 Begin of the insertion6_),End of the insertion Begin of the deletion 6_), End of the deletion
* selected card _(Main/Main Light)_

The benefit of this approach is that it works reguardless of what attribute is being &quot;drawn upon&quot; 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>