Quero criar esse efeito em que um círculo se expandirá para a esquerda e para a direita simultaneamente. Vi isso nesta resposta de outro post: https://stackoverflow.com/a/29922969
este é o código reproduzido na resposta deles:
.logo {
width: 100px;
height: 100px;
border-radius: 50px;
background: red;
transition: width 2s;
}
.logo:hover {
width: 300px;
}
<div class="logo"></div>
e esse é exatamente o efeito que eu quero, exceto que ele deve se expandir do centro em vez da esquerda para a direita.
Tentei com a ajuda da IA, mas nem ela conseguiu e recriou o mesmo efeito da resposta fornecida, mas não do centro para a esquerda e para a direita.