Po pierwsze po co <a> w środku? Jeżeli chcesz aby kula była linkiem to lepiej będzie jak zamienisz diva .grupa na link, wtedy cały obrazek będzie linkiem.
Po drugie jeżeli chcesz żeby po najechaniu na kule pojawiał się okrąg to wystarczy że dla klasy .okrąg nadasz właściwość
.okrąg{
opacity:0;
}
a dla klasy grupa:
.grupa:hover > .okrąg{
opacity:1;
}
Do tego oczywiście musisz wykonać odpowiednie pozycjonowanie, tak aby obrazki do siebie pasowały