Home/ Questions/Q 9161839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:03:57+00:00

I want to make a div slide over another backward one, but no idea

  • 0

I want to make a div slide over another backward one, but no idea how to any tips?
i can make the animation but when i mouse over the animaton dont work properly, can someone explain me why?

<!DOCTYPE html>
<html>
<head>
<style>
.fundo_main {
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
}
.fundo_main:hover {
    width:200px;
    height:200px;
    -webkit-animation-name:myfirst;
    position:relative;
}
.fundo {
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
    -webkit-animation-name:myfirst;
}

.fundo:hover {
    width:200px;
    height:200px;
    background-color:blue;
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:.3s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-direction:left;

}
@-webkit-keyframes myfirst {
    0% { width:0px; }
    65% { width: 150px;}    
    100% { width:200px; }
}
</style>
</head>
<body>
<div class="fundo_main">
    <div class="fundo"></div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would say change this:

    .fundo:hover

    To this one:

    .fundo_main:hover .fundo
    • 0