styles.css

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mainContainer {
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;

}

.imageContainer {
    background-color: red;
    width: 40%;
    height: 70%;
    border: 2px solid rgb(0, 0, 0);
    display: flex;
    /* justify-content: space-around;
    align-items: center; */
    position: relative;
    /* border: ; */
}

.miniImageContainer {
    width: 19%;
    height: 19%;
    border: 2px solid rgb(96, 49, 175);
}

.miniImageContainer:hover {
    border: 2px solid rgb(29, 218, 108);
}

.z1:hover ~ div {
    visibility: hidden;
}

.z2:hover ~ div {
    visibility: hidden;
}

.z3:hover ~ div {
    visibility: hidden;
}

.z4:hover ~ div {
    visibility: hidden;
}

.z1 {
    position: absolute;
    top: 8%;
    left: 8%;
}

.z2 {
    position: absolute;
    top: 24%;
    left: 24%;
}

.z3 {
    position: absolute;
    top: 40%;
    left: 40%;
}

.z4 {
    position: absolute;
    top: 56%;
    left: 56%;
}

.z5 {
    position: absolute;
    top: 72%;
    left: 72%;
}

.miniImageContainer img {
    width: 100%;
    height: 100%;
    
}

/* Visibility: hidden Ocultar */