Minha imagem fica se movendo pra cima e pra baixo quando passo o mouse por cima dos botões que coloquei um aumento e percebi que era o display: flex; porém não sei mais como eu conseguiria resolver isso
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Minha imagem fica se movendo pra cima e pra baixo quando passo o mouse por cima dos botões que coloquei um aumento e percebi que era o display: flex; porém não sei mais como eu conseguiria resolver isso
Olá, tudo bem?
Pode compartilhar seu código? Assim consigo te ajudar de forma mais assertiva!
HTML
<!DOCTYPE html>
<html lang="pt-br">
<link rel="icon" type="image/png" href="" />
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rhyan</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seus negócios<strong
class="titulo-destaque"> com o Rhyan!</strong></h1>
<p class="apresentacao__conteudo__texto">
Olá! Sou Rhyan, desenvolvedor de HTML e CSS. Ajudo pequenos
negócios a colocarem em prática boas ideias. Vamos conversar?
</p>
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse as minhas redes</h2>
<a class="apresentacao__links__link" href="https://instagram.com/">
<img src="./assets/instagram.png">
Instagram
</a>
<a class="apresentacao__links__link" href="">
<img src="./assets/github.png">
Teste 2
</a>
</div>
</section>
<img src="https://static8.depositphotos.com/1008303/880/i/600/depositphotos_8807359-stock-photo-mixed-race-man-smiling.jpg" alt="pessoateste">
</main>
<footer class="rodape">
<p>Desenvolvido por Rhyan</p>
</footer>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agdasima&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@700&display=swap');
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
.titulo-destaque {
color: rgb(0, 51, 255);
}
.apresentacao {
padding: 3% 7%;
margin: 9%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo {
width: 615px;
display: flex;
flex-direction: column;
flex-basis: 615px;
gap: 40px;
}
.apresentacao__conteudo__titulo {
font-size: 36px;
font-family: 'Roboto', sans-serif;
}
.apresentacao__conteudo__texto {
font-size: 24px;
font-family: 'Agdasima', sans-serif;
}
.apresentacao__links {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.apresentacao__links__subtitulo {
font-family: 'Roboto', sans-serif;
}
.apresentacao__links__link {
display: flex;
justify-content: center;
gap: 13px;
border: 2px solid rgb(0, 51, 255);
background-color: rgb(255, 255, 255);
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
padding: 21.5px 0;
text-decoration: none;
color: black;
font-family: 'Kanit', sans-serif;
}
.apresentacao__links__link:hover {
padding: 24px 3px;
background-color: black;
}
.rodape {
padding: 22px;
color: black;
background-color: blueviolet;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
Oi! Como vai?
Esse problema da imagem ficar se movimentando quando você passa o mouse sobre ela está ocorrendo por conta desse bloco de código:
.apresentacao__links__link:hover {
padding: 24px 3px;
background-color: black;
Aqui você está aumentando o padding do link.
Se você alterar esse bloco retirando essa linha do padding, essa movimentação vai parar de ocorrer.
Espero ter ajudado, qualquer dúvida estou a disposição!
Abraços e bons estudos.
Mas foi proposital o aumento mesmo kkkk, é que eu não queria que a imagem ficasse se mexendo junto
Oii, tudo bem?
Então, para continuar com esse aumento e a imagem parar de se movimentar é necessário realizar as seguintes alterações:
Nos blocos de código:
.apresentacao__links__link {
margin: 2.5px 3px; //adicione*
}
.apresentacao__links__link:hover {
margin:0; //adicione*
}
A "margin: valor;" é usada para definir o espaço em torno de um elemento, separando-o de outros próximos, definindo as margens dele.
Adicionando a margem a imagem não vai mais se movimentar.
Se surgir qualquer dúvida, estou aqui para ajudar.