Question 207585 in CSS Question posted in
Some basic documentation can be found here.

CSS changing background animation after hover

I have the code responsible for the fact that when you hover over an element, the yellow background animates from top to bottom.
How can I make an animation so that the yellow background slides down when the cursor moves off the element?

I tried using the hover animation again but it doesn’t work…

<div class="box">test</div>

.box:hover{
    background-position:0 -100%;
}
.box{
  height:150px; padding:30px;
    background: #ffffff
        background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #FFE606));
   background:-webkit-linear-gradient(bottom, #fff 50%, #FFE606 50%);
   background:-moz-linear-gradient(bottom, #fff 50%, #FFE606 50%);
   background:linear-gradient(to bottom, #fff 50%, #FFE606 50%);
   background-size:100% 200%;
   background-position:0 0;
   -webkit-transition:background-position .3s ease-out;
   -moz-transition:background-position .3s ease-out;
   transition:background-position .3s ease-out;
}

https://codepen.io/otomasz/pen/VwVQXpm

Tags:

2

Answers


  1. 0 
    .box:hover {
  background-position: 0 -100%;
}

.box {
  height: 150px;
  padding: 30px;
  background: #ffffff;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #FFE606));
  background: -webkit-linear-gradient(bottom, #fff 50%, #FFE606 50%);
  background: -moz-linear-gradient(bottom, #fff 50%, #FFE606 50%);
  background: linear-gradient(to bottom, #fff 50%, #FFE606 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-transition: background-position .3s ease-out;
  -moz-transition: background-position .3s ease-out;
  transition: background-position .3s ease-out;
}

.box:not(:hover) {
  background-position: 0 100%;
}

    In this modified CSS, the :not(:hover) pseudo-class is used to target the .box element when it’s not being hovered over. By setting the background-position to 0 100%, the yellow background will slide down smoothly when the cursor moves off the element.

    Login or Signup to reply.
  2. 0

    Add tag in your element and use has() selector.

    For this sample I use span tag. So when you hover on the test element using has() selector, it will activate the style.

    body:has(span:hover) .box {
  background-position:0 -100%;
}
/* .box:hover{
    background-position:0 -100%;
} */
.box{
  height:150px; padding:30px;
  background: #ffffff;
  background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #FFE606));
  background:-webkit-linear-gradient(bottom, #fff 50%, #FFE606 50%);
  background:-moz-linear-gradient(bottom, #fff 50%, #FFE606 50%);
  background:linear-gradient(to bottom, #fff 50%, #FFE606 50%);
  background-size:100% 200%;
  background-position:0 0;
  -webkit-transition:background-position .3s ease-out;
  -moz-transition:background-position .3s ease-out;
  transition:background-position .3s ease-out;
}
    <div class="box">
  <span>test</span>
</div>

    EDIT: You can use javascript to stop the animation.

    $(document).ready(function(){
  $(".box").mouseout(function(){
    $(".box").css("background-position", "0 -100%");
  });
});
    .box:hover{
    background-position:0 -100%;
}
.box{
  height:150px; 
  padding:30px;
  background: #ffffff;
  background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #FFE606));
   background:-webkit-linear-gradient(bottom, #fff 50%, #FFE606 50%);
   background:-moz-linear-gradient(bottom, #fff 50%, #FFE606 50%);
   background:linear-gradient(to bottom, #fff 50%, #FFE606 50%);
   background-size:100% 200%;
   background-position:0 0;
   -webkit-transition:background-position .3s ease-out;
   -moz-transition:background-position .3s ease-out;
   transition:background-position .3s ease-out;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="box">test</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search