efeito zoom

Olá, Ernani.

Você já tem um código inicial. É importante você tentar algo para eu conseguir acompanhar seu raciocínio lógico, dessa forma podemos trocar conhecimento e te ensinar a melhor forma de criar sozinho suas próprios soluções :-)

código css para Zoom

    img {
      max-width: 100%;
      display: block;
    }    

    .thumbnail_top_left {
      position: relative;
      top: 50%;
      left: 73%;
      width: 320px;
      height: 240px;
      margin-top: 135px;
      -webkit-transform: translate(-50%, -50%);
      /* Safari and Chrome */
      -moz-transform: translate(-50%, -50%);
      /* Firefox */
      -ms-transform: translate(-50%, -50%);
      /* IE 9 */
      -o-transform: translate(-50%, -50%);
      /* Opera */
      transform: translate(-50%, -50%);
    }

    .thumbnail_top_right {
      position: relative;
      top: 50%;
      left: 31%;
      width: 320px;
      height: 240px;
      margin-top: 135px;
      -webkit-transform: translate(-50%, -50%);
      /* Safari and Chrome */
      -moz-transform: translate(-50%, -50%);
      /* Firefox */
      -ms-transform: translate(-50%, -50%);
      /* IE 9 */
      -o-transform: translate(-50%, -50%);
      /* Opera */
      transform: translate(-50%, -50%);
    }

    .thumbnail_dow_left {
      position: relative;
      top: 50%;
      left: 81%;
      width: 328px;
      height: 240px;
      margin-top: 62%;
      -webkit-transform: translate(-50%, -50%);
      /* Safari and Chrome */
      -moz-transform: translate(-50%, -50%);
      /* Firefox */
      -ms-transform: translate(-50%, -50%);
      /* IE 9 */
      -o-transform: translate(-50%, -50%);
      /* Opera */
      transform: translate(-50%, -50%);
    }

    .thumbnail_dow_right {
      position: relative;
      top: 50%;
      left: 23%;
      width: 320px;
      height: 240px;
      margin-top: 62%;
      -webkit-transform: translate(-50%, -50%);
      /* Safari and Chrome */
      -moz-transform: translate(-50%, -50%);
      /* Firefox */
      -ms-transform: translate(-50%, -50%);
      /* IE 9 */
      -o-transform: translate(-50%, -50%);
      /* Opera */
      transform: translate(-50%, -50%);
    }

    .image {
      width: 100%;
      height: 100%;
    }

    .image img {
      -webkit-transition: all 1s ease;
      /* Safari and Chrome */
      -moz-transition: all 1s ease;
      /* Firefox */
      -o-transition: all 1s ease;
      /* IE 9 */
      -ms-transition: all 1s ease;
      /* Opera */
      transition: all 1s ease;
    }

    .image_top_lef:hover img {
      -webkit-transform: scale(2.25);
      /* Safari and Chrome */
      -moz-transform: scale(2.25);
      /* Firefox */
      -ms-transform: scale(2.25);
      /* IE 9 */
      -o-transform: scale(2.25);
      /* Opera */
      transform: scale(2.25);
    }

html com bootstrap

<div class="container-fluid">    

    </div class="row">
        <div class="col-md-6">

            <div class="thumbnail_top_left">
              <div class="image">
                <img src="<?=base_url('assets/site/img/circ_top_left_1.png')?>" alt="image" />
              </div>
            </div> 

        </div>

        <div class="col-md-6">

            <div class="thumbnail_top_right">  
              <div class="image">
                <img src="<?=base_url('assets/site/img/circ_top_right.png')?>" alt="image" />
              </div>
            </div>

        </div>        
    </div>

    <div class="row">  
        <div class="col-md-6">

            <div class="thumbnail_dow_left">
              <div class="image_top_left">
                <img src="<?=base_url('assets/site/img/circ_dow_left.png')?>" alt="image" />
              </div>
            </div> 

        </div>

        <div class="col-md-6">

            <div class="thumbnail_dow_right">
              <div class="image">
                <img src="<?=base_url('assets/site/img/circ_dow_right_1.png')?>" alt="image" />
              </div>
            </div>

        </div>
    </div>            
</div>

Ernani. A parte de CSS está ok. Mas pelo que eu vi você comentando no primeiro post que você quer que tenha o zoom na foco no momento que o usuário clicar nela. Certo?

Se for isso está faltando um pouco de JavaScript pra fazer esse comportamento. Você chegou a começar ele?

Ernani. A parte de CSS está ok. Mas pelo que eu vi você comentando no primeiro post que você quer que tenha o zoom na foco no momento que o usuário clicar nela. Certo?

Se for isso está faltando um pouco de JavaScript pra fazer esse comportamento. Você chegou a começar ele?

subi o código no site http://agenciahamis.com.br/fpvl/servicos/loteamento

o zoom de humanas está funcionando certinho agora falta colocar o zoom de natureza para se sobrepor as outras igual humanas ou as outras sumirem quando ele fizer o zoom

Era o Z-index no hover...rsrsrs agora vamos melhor esse código?

fazer um onclick com o javascript agora é isso?

Sim. Isso mesmo Ernani.

Só usar no lugar de onclick o addEventListener. Por exemplo:

Com onclick:

seuElemento.onclick = function() {
    // Seu código
}

Com addEventListener:

seuElemento.addEventListener('click', function() {
    // Seu código
})