pseudo-class: not e: focus in CSS

I have the following class in the CSS:

.iconQuemSomos {
    cursor: pointer;
    margin: 0 15px;
    transition: all 0.3s ease;
}
.iconQuemSomos:focus {
    opacity: 1;
    position: absolute;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);

}
.iconQuemSomos:not(:focus){
    visibility: hidden;
}

What I am trying to do is that the object that is with the class and that is selected in the focus, can occur an animation while the other similar objects, sum of the screen. The problem is that the CSS is loaded before any interaction of the user, therefore, objects of this class that initially will not be focused, will appear on the screen "disappeared." I thought of using JS, but unfortunately I do not master it very well yet, does anyone have any idea how I can solve it?

I'm trying to do something like this:

.iconQuemSomos:not(:focus) img:not(:active){
    visibility: hidden;
}

Since the HTML looks like this:

    <a class="iconQuemSomos" href="#">
     <img class="img-fluid" style="height: 150px" src="assets/img/icos/Icone_Quemsomos.png">
   </a>