Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

DUVIDA DE FLEXBOX

por Victor Nunes Saboia
| 136.6k xp | 73 posts

Eu estou tentando criar animacoes no meu flexbox.Por exemplo....Eu estou querendo criar uma animacao em uma imagem que esta dentro do main.Mas eu só consigo aplicar o efeito se eu colocar esse primeiro código ai embaixo.Quando eu entro no ESPACO do main o efeito é acionado,mas eu quero que ele seja acionado só quando eu colocar o meu mouse EM CIMA da imagem,eu ja tentei colocar uma classe à imagem,como no segundo código ai embaixo,mas nada da certo.Tem algum outro jeito?Será que é porque estou usando flexbox? Não sei... Para os links eu consegui aplicar o efeito quando o mouse passava em cima...assim como eu quero para a imagem,mas eu percebi que todos que eu coloco dentro de uma "ul" e seleciono pela classe que eu botar no "li",eu consigo...mas acho que não tem como eu colocar a imagem dentro de uma "ul" porque semanticamente ta errado creio :/

Código que funcionou:

main:hover img,main:focus img{
    box-shadow: 0 0 3em white;
}



Tentei:

.imagem:hover, .imagem:focus{
    box-shadow: 0 0 3em white;
}
3 respostas
solução!
por Yuri Padilha
| 152.5k xp | 226 posts
Instrutor Desenvolvedor e Instrutor

Oi Victor, tudo bem?

Cara isso é muito estranho, devia ter funcionado normal o segundo jeito q vc tentou.

Vc colocou a classe na imagem no html?

<img class="imagem" src...e etc>

Me manda o código do html pra eu ver?

Abraços!

por Victor Nunes Saboia
| 136.6k xp | 73 posts
HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alice|Cormorant+Garamond|IBM+Plex+Mono|IBM+Plex+Serif|Open+Sans+Condensed:300|Rajdhani|Shadows+Into+Light">
    </head>
    <body>

        <nav>

            <ul>
                <li class="li-barra-navegacao"><a href="site.html">Inicio</a></li>
                <li class="li-barra-navegacao"><a href="sobremim.html">Sobre mim</a></li>
                <li class="li-barra-navegacao"><a href="portfolio.html">Portfolio</a></li>
                <li class="li-barra-navegacao"><a href="blog.html">Blog</a></li>
                <li class="li-barra-navegacao"><a href="contato.html">Contato</a></li>
            </ul>
        </nav>

        <main>
            <div class="imagem-div">
                <img class="imagem" src="imagens/eu.jpg" alt="Victor Nunes Portfolio">

            </div>
                <ul class="nomes">
                        <li class="nomes primeiro">HTML</li>
                        <li class="nomes segundo">CSS3</li>
                        <li class="nomes terceiro">JAVASCRIPT</li>
                        <li class="nomes quarto">PHP</li>
                        <li class="nomes quinto">BOODSTRAP</li>
                        <li class="nomes sexto">FLEXBOX</li>

                    </ul>
        </main>

        <footer>
            <ul>
                <li class="li-rodape"><a href="#" class="twitter">Twitter</a></li>
                <li class="li-rodape"><a href="#" class="facebook">Facebook</a></li>
                <li class="li-rodape"><a href="#" class="linkedin">Linkedin</a></li>
            </ul>
        </footer>
    </body>

</html>

CSS:


body,html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
}

nav{
    border: 2px solid black;
    background-image: linear-gradient(to bottom right,#2b283e,#5d4d6d);
    background-attachment: fixed;
    border: 2px ridge #648d97; 
    border-bottom: 0;
    text-align: center;
    order: 1;
    flex: 1 0 auto;
}

nav a{
    text-decoration: none;
    color:#af8bba;
    font-family: 'Alice', serif;
}

.li-barra-navegacao{
    display: inline-block;
    padding: 1em 2em 1em 2em;
    line-height: 1em;
    margin-bottom: .8em;
}

main{
    order: 2;
    flex: 1 0 auto;
}

footer{
    order: 3;
    flex-shrink: 0;
    background-image: linear-gradient(to bottom right,#2b283e,#2b283e);
    background-attachment: fixed;
    border: 5px solid #2b283e;
    text-align: center;
    padding: 2em;
    padding-bottom: 1em;
}

Está ai o código ,botei a imagem em uma div,pra ver se dava certo ,mas não deu :/

por Yuri Padilha
| 152.5k xp | 226 posts
Instrutor Desenvolvedor e Instrutor

Oi Victor, segue meu código funcionando:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet"
                href="https://fonts.googleapis.com/css?family=Alice|Cormorant+Garamond|IBM+Plex+Mono|IBM+Plex+Serif|Open+Sans+Condensed:300|Rajdhani|Shadows+Into+Light">

    <style>
        body, html {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        nav {
            border: 2px solid black;
            background-image: linear-gradient(to bottom right, #2b283e, #5d4d6d);
            background-attachment: fixed;
            border: 2px ridge #648d97;
            border-bottom: 0;
            text-align: center;
            order: 1;
            flex: 1 0 auto;
        }

        nav a {
            text-decoration: none;
            color: #af8bba;
            font-family: 'Alice', serif;
        }

        .li-barra-navegacao {
            display: inline-block;
            padding: 1em 2em 1em 2em;
            line-height: 1em;
            margin-bottom: .8em;
        }

        main {
            order: 2;
            flex: 1 0 auto;
        }

        footer {
            order: 3;
            flex-shrink: 0;
            background-image: linear-gradient(to bottom right, #2b283e, #2b283e);
            background-attachment: fixed;
            border: 5px solid #2b283e;
            text-align: center;
            padding: 2em;
            padding-bottom: 1em;
        }

        .image:hover {
            box-shadow: 0 0 3em white;
        }

    </style>
</head>
<body>

<nav>

    <ul>
        <li class="li-barra-navegacao"><a href="site.html">Inicio</a></li>
        <li class="li-barra-navegacao"><a href="sobremim.html">Sobre mim</a></li>
        <li class="li-barra-navegacao"><a href="portfolio.html">Portfolio</a></li>
        <li class="li-barra-navegacao"><a href="blog.html">Blog</a></li>
        <li class="li-barra-navegacao"><a href="contato.html">Contato</a></li>
    </ul>
</nav>

<main>
    <div class="imagem-div">
        <img class="image" src="https://placekitten.com/g/200/300" alt="Victor Nunes Portfolio">

    </div>
    <ul class="nomes">
        <li class="nomes primeiro">HTML</li>
        <li class="nomes segundo">CSS3</li>
        <li class="nomes terceiro">JAVASCRIPT</li>
        <li class="nomes quarto">PHP</li>
        <li class="nomes quinto">BOODSTRAP</li>
        <li class="nomes sexto">FLEXBOX</li>

    </ul>
</main>

<footer>
    <ul>
        <li class="li-rodape"><a href="#" class="twitter">Twitter</a></li>
        <li class="li-rodape"><a href="#" class="facebook">Facebook</a></li>
        <li class="li-rodape"><a href="#" class="linkedin">Linkedin</a></li>
    </ul>
</footer>
</body>

</html>

Coloquei a classe .image na imagem, troquei a imagem por uma externa ( pq eu n tinha acesso a sua ) e coloquei um seletor com .image:hover com a propriedade do box-shadow q vc mencionou (:

Quando passo o mouse em cima da imagem ele coloca o box-shadow.

Qualquer dúvida só falar.

Abração!