css - 別のクラスの CSS トランジション img:hover

Question

画像の色を与えるこの :hover 効果を持つクラスがあります。そして、:hover で「+」を表示するこの別のクラスがありますが、このクラスをホバーしたときのみです。1 つの img:hover に両方の :hover 効果を持たせたい:

img:hover 効果のコード。(白黒フィルターを使用)。

.og-grid li > a,
.og-grid li > a img {
    border: none;
    outline: none;
    display: block;
    position: relative;
    -webkit-filter: grayscale(100%); 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

.og-grid li > a,
.og-grid li > a img:hover{
    -webkit-filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

+ ホバー効果のコード。

.viewmore {
    margin-left: 350px;
    opacity: 0;
    position: absolute;
    z-index: 100;
}

.viewmore:hover{
    opacity: 100;
    margin-top: 45px;
    transition: all ease 0.9s;
}

HTML（グリッド内のすべての画像にこれを適用したい）：viewmore.pngは、ホバーするとフェードインする「+」画像です。

<img src="img/viewmore.png" class="viewmore">
    <ul id="og-grid" class="og-grid">             
        <li>  
            <a href="" data-largesrc="img/work/sunmoon.jpg" data-title="MoonSun Shades" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                <img src="img/work/sunmoon2.jpg" alt="img01"/>
            </a>
        </li>
    </ul>

GIF: https://gyazo.com/fe388835229cf2492a0188f2d29a12df

imgにカーソルを合わせると、両方を同時に表示したいと思います。