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.
<!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 
