Skip to main content

Problema com animação Como posso definir um elemento sobre outro elemento?

Bom dia, boa tarde, boa noite.

Estou tendo problemas ao utilizar o "transform: scale(1.7)"transform: scale(1.7) no "div:hover"div:hover, toda vez q passo o mouse, o divdiv aumenta, mas o do lado fica na frente dele, como posso fazer pra q esse q passei o mouse fique na frente?

Esse é o codigo:Esse é o código:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Problema com animação

Bom dia, boa tarde, boa noite.

Estou tendo problemas ao utilizar o "transform: scale(1.7)" no "div:hover", toda vez q passo o mouse, o div aumenta, mas o do lado fica na frente dele, como posso fazer pra q esse q passei o mouse fique na frente?

Esse é o codigo:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Como posso definir um elemento sobre outro elemento?

Bom dia, boa tarde, boa noite.

Estou tendo problemas ao utilizar o transform: scale(1.7) no div:hover, toda vez q passo o mouse, o div aumenta, mas o do lado fica na frente dele, como posso fazer pra q esse q passei o mouse fique na frente?

Esse é o código:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Fonte Link

Problema com animação

Bom dia, boa tarde, boa noite.

Estou tendo problemas ao utilizar o "transform: scale(1.7)" no "div:hover", toda vez q passo o mouse, o div aumenta, mas o do lado fica na frente dele, como posso fazer pra q esse q passei o mouse fique na frente?

Esse é o codigo:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>