Złączenie dwóch elementów w CSS

pytanie zadane 22 marca 2020 w HTML i CSS przez Michuuo0o Nowicjusz (160 p.)

Witam!

Ćwiczę sobie HTML i CSS robiąc różne zadania.Aktualnie napotkałem problem którego nie potrafię rozwiązać.

Chciałbym jakoś połączyć dwa elementy ze soba (trojkat i ikona) zeby po najechaniu na nich myszka wyswietlaly sie jednoczesnie a nie tak jak teraz czyli osobno.

HTML:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Miniaturka</title>
    <link href="css.png">
</head>
<body>
    <div class="element">
        <div class="grafika">
            <div class="czas">3:15</div>
            <div class="ikona"></div>
            <div class="trojkat"></div>
        </div>
        <div class="odnosnik">
            <div class="tytul"><a href="https://www.youtube.com/watch?v=FehVIvjhGxU">CSS fajna gra</a></div>
            <div class="licznik">1,111,111 wyswietlen</div>
            <div class="kiedy">5 dni temu</div>
        </div>
    </div>
</body>
</html>

CSS:

body {
    background-color: gray;
    font-family: sans-serif;
    font-size: 12px;
}

.element {
    width: 200px;
    height: auto;
    position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
}

.grafika {
    background-image: url(css.png);
    height: 100px;
    width: 200px;
    position: relative;
}

.czas {
    position: absolute;
    color: white;
    font-size: 12px;
    background-color: black;
    opacity: 0.8;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    right: 5px;
    bottom: 5px;
}

.odnosnik {
    background-color: white;
    padding-left: 5px;
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
}

a {
    text-decoration: none;
    color: #0088FF;
    transition-duration: 0.3s; 
}

a:hover{
   color: #0000FF;
}

.licznik {
   display: inline-block;
   padding-top: 10px;
   
}

.kiedy {
    display: inline-block;
    padding-top: 10px;
    position: absolute;
    right: 5px;
}

.trojkat {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 40px;
    border-color: transparent transparent transparent black;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 53%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.ikona {
    height: 70px;
    width: 70px;
    background-color: white;
    opacity: 0;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.trojkat:hover{
   opacity: 0.5;
}

.ikona:hover {
    opacity: 0.4;
}

Z góry dziekuje za pomoc!