Question 265816 in Html Question posted in
Some basic documentation can be found here.

Html – Wanting smooth transition off of the hover state

I have the transition working currently where it’s doing an ease-in-out on the hover but as soon as I leave the div container it snaps back to its original state (no conic-gradient border) with no transition. What should I do to fix this?

I tried setting the transition to the div class itself then I tried applying the transition to the ::before pseudo. The ::before transition only worked on the hover on the div container, and not when I left the div container. Attaching link to screenshot image of code.

the link to my website is matthewcwolfe.com

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow::before {

content:"";
position: absolute;
inset: 0;
transition: all .2s ease-in-out;
opacity: 0;

}

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow:hover::before {

background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
transform: translate3d(0,0,-1px);
filter: blur(10px);
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0);  
opacity: 1;

}
Tags:

2

Answers


  1. 0

    If you looking for flat color smooth transition and not conic-gradient border color then try this

    Remove this below code completely

    .wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: all .2s ease-in-out;
  opacity: 0;
}

    and add this

    .wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow:hover {
    box-shadow: 0px 0px 20px 0px #f5a00e;
}
    Login or Signup to reply.
  2. 0

    The issue is the fact that the background and clip-path aren’t initially set in the non-hover state. So when you hover, it transitions to that gradient background and cutout shape, but when you remove hover, it has nothing to transition to (hence the instant disappearance).

    You can fix this by just copying that same background and clip-path to the non-hover state. That should be fine since you’re transitioning from 0 opacity to 1 opacity anyway. I tested it out on your site in the devtools, and it seemed to work.

    .wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow::before {

content:"";
position: absolute;
inset: 0;
transition: all .2s ease-in-out;
opacity: 0;
/* SAME BACKGROUND ON NON-HOVER */
background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
/* SAME CLIP-PATH ON NON-HOVER */
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0); 

}

.wp-block-group.has-base-background-color.has-background.is-layout-flow.wp-container-7.wp-block-group-is-layout-flow:hover::before {

background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
transform: translate3d(0,0,-1px);
filter: blur(10px);
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0);  
opacity: 1;
}

    Edit: In fact, you might as well just remove background and clip-path from the hover state and keep them in the non-hover style since they don’t change at all. The important thing is that filter and opacity transition properly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search