JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "area">
    <a href = "#">Link</a>
    <img src = "http://placehold.it/100x100" />
</div>

CSS

.area {
    display: table;
    position: relative;
}

.area:hover > a {
    color: red;
}

.area > img {
    cursor: pointer
}

.area > a {
    position: absolute;
    right: -50px;
    top: 50%;
    font: bold 15px/2 Sans-Serif;
    color: #000;
    text-decoration: none;
    margin-top: -15px;
}

.area > a:hover {
    color: initial;
    text-decoration: underline;
}

.area > a:hover + img {
    opacity: 0.5;
}