Animate item to :Hover and return with other properties

Asked

Viewed 127 times

0

Having an item, for example, an icon. I need your initial state to be gray and your CSS will be:

filter: grayscale(100%) opacity(0.5);
transition: 1s;

After that, in the :hover the icon needs to increase, rotate and receive color:

filter: grayscale(0%) opacity(1);
transition-duration: 1s;
transform: scale(1.5) rotate(-15deg);

However, when removing the mouse you need to continue with the original color and size. Here’s what I already got, but when removing the mouse the icon needs to continue colored with its start size: watch video

css css3 css-hover

  • "When removing the mouse you need to continue with the color" And you couldn’t start with that color? you want an element state control, something like "Hover at least once", and this kind of thing is not done with css, would have to do with javascript

  • I think you will need to use JS, because :Hover changes the properties of the element while the mouse is over it. When removing the mouse, it goes back to its original state.

  • Only with CSS there is no way, because you can’t keep the state of Hover after taking the mouse from the elemeto. You can even go with one animation and come back with another. But keep the animation of the back after taking the mouse out you can’t

  • Thank you so much for the feedback! And using JS? You would already have a base ready for me to understand how to do?

1 answer

1


Only with CSS is not possible because the :hover temporarily changes the properties of the element that returns to its original state after losing the :hover.

With Javascript you can use the event mouseout to change the property filter when the element loses the :hover, staying permanently with the grayscale in 0% and the opacity in 1:

document.addEventListener("DOMContentLoaded", function(){
   
   document.addEventListener("mouseout", function(e){
      
      if(~e.target.className.indexOf("icone")){
         e.target.style.filter = "grayscale(0%) opacity(1)";
      }
      
   });
   
});
.icone{
   filter: grayscale(100%) opacity(0.5);
   transition: 1s;
}

.icone:hover{
   filter: grayscale(0%) opacity(1);
   transition-duration: 1s;
   transform: scale(1.5) rotate(-15deg);
}
<img src="https://assets.coingecko.com/coins/images/1060/small/icon-icx-logo.png?1547035003" class="icone">
<img src="https://www.oxbridgeacademy.edu.za/wp-content/uploads/2018/01/time-icon.png" class="icone">

See that the element needs to have the class .icone (or any other you want).

  • worked really well your solution. It helped me a lot, I hope it helps others as well. Thanks for the help!

Browser other questions tagged css css3 css-hover

You are not signed in. Login or sign up in order to post.