Como exibir ou focar numa área específica de uma imagem usando css?

Programação e Desenvolvimento
,
1

Bom dia.

Quero focar em uma área específica de uma imagem para que ao clicar nela esse foco expanda revelando a imagem inteira. Por exemplo uma foto de avatar.

Eu consegui fazer isso colocando a foto com dimensões de área perfeitamente quadrada de tamanho L/A 200px em uma div com L/A 70px em que o comando overflow oculta o restante da imagem fora dessa área e ao clicar nela o css chama o comando active onde coloco as dimensões natural da imagem junto a um efeito de transição e ele expande revelando a imagem. Veja que a única coisa que muda é a janela, a imagem em momento algum se altera.

Eu poderia parar por aí porque meu objetivo foi alcançado mas não da forma como eu esperava pois isso gerou um código razoavelmente grande só para centralizar a imagem em duas etapas, antes e depois de clicar e eu queria otimizar isso.

Alguém pode dar uma luz?

1 curtida
2

Olá cidadão @Vicente, boa noite, gosto muito de CSS, há muito para memorizar,por isso eu estudo sempre um pouco todo dia,vi seu questionamento,e abaixo, tenho essa versão para você,visualizando eu, bem por cima do como poderia ou poderá ser este seu falado projeto.:bulb:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expandable Avatar</title>
    <style>
        .container {
            width: 70px;
            height: 70px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.5s ease;
            position: relative;
        }

        .container img {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.5s ease;
        }

        .container.active {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container" onclick="this.classList.toggle('active')">
        <img src="avatar.jpg" alt="Avatar">
    </div>
</body>
</html>

Como não sei detalhes exatos sobre seu projeto,o código acima,como exemplo,o Sr. deve ajustar ao seu projeto, espero que funcione e possa ajudar na sua pendência resolutiva para seu projeto pessoal.

.container tem dimensões iniciais de 70px por 70px, com overflow oculto e uma transição suave de 0.5s.

É como lhe disse, você deve ajustar ao seu modelo pessoal…

.container img está centralizada dentro da div usando position: absolute e transform: translate(-50%, -50%).

O Sr. vai vendo aí…

Quando a div .container recebe a classe active, suas dimensões mudam para 200px por 200px, é quando ocorre seu objetivo,revelando toda a imagem.

Você só precisa ajustar o código para que ele se adapte ao tamanho e posição de sua imagem conforme necessário,note bem o Sr. que o código acima é um exemplo básico em que deduzi mediante seu esboço acima, porque você não compartilhou uma cópia de seu código no tópico; caso o código acima se adeque ao seu requerimento, posso seguir resolvendo, mediante seu retorno.

Boa noite :coffee::crossed_fingers:

1 curtida
3

Ok, só mais alguns detalhes: Abaixo lhe deixo essa segunda versão de código,pois na versão de cima,como não há como compartilhar pasta :file_folder:,a foto não subiu, então chamei um avatar/foto da web mesmo,pois no código acima,se você rodar na IDE, vai estar em branco total, enquanto editava minha resposta e explicava, esqueci deste detalhe.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expandable Avatar</title>
    <style>
        body {
            background-color: #5200FF;
        }
        .container {
            width: 70px;
            height: 70px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.5s ease;
            position: relative;
        }
        .container img {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.5s ease;
        }
        .container.active {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container" onclick="this.classList.toggle('active')">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRELH4hDzRnoD7uS7Xnx_2D_zPA3gFCcQxDHg&s" alt="Avatar">
    </div>
</body>
</html>

Há mais um detalhe nessa versão acima: adicionei background-color: #5200FF; ao body cor usada na logo do Mastodon,rede social descentraliza. Na versão acima,o body é white e no CSS não há background-color:

Bom… Espero que ajude, torcendo.:crossed_fingers::bulb:

1 curtida
4

Sua dica parece ser uma excelente alternativa. Vou testar assim que retomar meu projeto que está parado por enquanto. Enrolado com outros afazeres. Assim que puder te dou um retorno. Muito obrigado pela disposição e pela dica.

1 curtida
5

Sempre grato então,se quiser, coloque opacity pesquise os valores,tipo, 1.7; ou 1.5; para ficar transparente,e pode até colocar texto no body, fica bem legal, pois dá para ver o texto por baixo,ou você pode colocar o texto contornando o avatar. Fique a vontade, boa sorte.:four_leaf_clover:

1 curtida
6

Este tópico foi fechado automaticamente. Novas respostas não são mais permitidas.