6
respostas

Rodapé mudando de tamanho com o hover dos produtos

Como fazer o rodapé ocupar sempre o mesmo tamanho, sem diminuir com quando passo o mouse pelos produtos?

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura - Produtos</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><a rel="stylesheet" href="index.html"><img src="imgs/logo.png" alt="Logo da Barbearia Alura"></a>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="imgs/cabelo.jpg">
                    <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                    <p class="produto-preco">R$25,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="imgs/barba.jpg">
                    <p class="produto-descricao">Corte e desenho profissional de barba</p>
                    <p class="produto-preco">R$18,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="imgs/cabelo+barba.jpg">    
                    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                    <p class="produto-preco">R$35,00</p>
                </li>
            </ul>
        </main>

        <footer>
            <img src="imgs/logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura 2019</p>
        </footer>
    </body>
</html>
6 respostas

style.css

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 0;
}

footer {
    text-align: center;
    background: url("imgs/bg.jpg");
    padding: 40px 0;
    vertical-align: bottom;
}

.copyright {
    font-size: 13px;
    color: #FFFFFF;
    margin: 20px 0 0;
}

main {
    width: 940px;
    margin: 0 auto;
}

.enviar:hover {
    background: darkorange;
}

tira esse cara e testa

.produtos li:hover h2 {
    font-size: 34px;
}

Realmente deu certo, e obrigado pela resposta! Mas eu já sabia que o problema era o aumento da fonte kkk e não quero deixar de aumentar a fonte. O que estou procurando é uma solução que altere apenas o tamanho do espaço em branco, sem alterar o rodapé da página

Você pode tentar mexer na posição do objeto que você está tentando mexer, mas cuidado com isso porque você pode quebrar seu design.

Pois é, não consegui mexer na posição sem quebrar o design...

O objeto que você está mexendo tem que ter um pai, ai você coloca o pai como position: relative e o filho que você está mexendo como position: absolute.

Exemplo

<div class="pai"> 
      <div  class="filho">
              olá mundo
      </div>
</div>

.pai{ position:relative;

}

.filho{ position: absolute;

}

desta forma a posição absoluta do filho, será até o pai. Se você não colocar position relative no pai, o filho poderá se mover por toda a página.