Ajuda com Modal

-
Oi pessoal, tudo bom?

Estou fazendo um site em que o suário entra com características de um animal em um formulário pra descobrir qual animal é. Estou tentando colocar uns botões de ajuda, pra quando a pessoa não souber qual é determinada característica, ele clique no botão de ajuda e apareça uma modal com uma foto exemplificando. O problema é que são vários botões de ajuda num mesmo formulário. Eu criei as modais, mas elas estão se sobrepondo. Ou seja, quando eu clico no primeiro link de ajuda só consigo ver a foto do último link, pq a primeira está embaixo do segundo que está embaixo do terceiro e assim por diante. Alguém pode me ajudar? Sou iniciante em HTML e CSS e não consigo resolver D: Obrigada!

Código HTML

<form name="formChave" action="testeFormatado.php" method="post">
                <!--CABEÇA-->
                <p>
                    
                    <label>Cor da fronte:</label>
                    <a href="#modalFronte"><img src="imagens/ajuda.png"></a>            
                    <div id="modalFronte" class="modal"></div>
                    <div id="figuraFronte" class="box">
                        <img src="imagens/exemplo.png">
                        <a href="" id="close">X</a>
                    </div>
                    <!---->
                    <input type="radio" name="cor_Fronte" value="='preto'" required="required"/>Preto
                    <a href="#modalPreto"><img src="imagens/ajuda.png"></a>    
                    <div id="modalPreto" class="modal"></div>
                    <div id="figuraPreto" class="box">
                        <img src="imagens/preto.png">
                        <a href="" id="close">X</a>
                    </div>
                    <!---->
                    <input type="radio" name="cor_Fronte" value="='branco'"/>Branco
                    <a href="#modalBranco"><img src="imagens/ajuda.png"></a>
                    <div id="modalBranco" class="modal"></div>
                    <div id="figuraBranco" class="box">
                        <img src="imagens/branco.png">
                        <a href="" id="close">X</a>
                    </div>
                    <!---->
                    <input type="radio" name="cor_Fronte" value="IS NOT NULL"/>Não tenho esse dado
                </p>

	CSS

.modal

{

    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: rgba(0,0,0,.8);
    position:fixed;
    display:none;
}

.modal:target {

    display:block;
}

.modal:target~.box {

    top:150px;
    transition:all .3s;
    transition-delay: .2s;
}

.box

{

    width:300px;
    height:300px;
    position:absolute;
    margin-left:-360px;
    left:50%;
    top:-410px;
}

.box img {

    width:100%;
    position: absolute;
    
}
#close

{

    color:#fff;
    font-family:'Arial';
    text-decoration:none;
    font-size:20px;
    position:absolute;
    background-color:#000;
    width:22px;
    height:22px;
    text-align:center;
    right:0;
}