3
I have a div
who has an animation in :hover
, but if the user takes the mouse away from the div
before the animation ends she cuts in half and does not finish.
I tried to make a "spot light" effect that crosses the image from left to right on the mouse :hover
, But if the mouse comes off the animation, it’s interrupted abruptly. I would like this "spot light" to continue going through the image until the end even if the mouse get off the div
.
See the problem happening when you do the :hover
and removes the mouse immediately thereafter before spot go through the image in full.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.box {
width: 50%;
height: 200px;
background-color: gray;
position: relative;
margin: 20px auto;
overflow: hidden;
background-image: url(http://placecage.com/700/300);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.box:hover::after,
.box:hover::before {
content: "";
width: 40%;
height: 200px;
position: absolute;
z-index: 2;
background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 40%,rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 100%);
transform: skewX(-5deg);
left: -40%;
animation: bgc 1000ms linear forwards;
mix-blend-mode: overlay;
}
@keyframes bgc {
0% {left: -40%}
100% {left: 140%}
}
<div class="box"></div>
OBS: Animation only happens once every mouse over.
I believe q has to use js even.... but I liked the placecage.com and the other sites of this kkkkkk guy
– Karl Zillner
@Karlzillner I think it will have to be with JS or jQuery even, with CSS I think it will not happen. I even tried with
transition
and not withkeyframes
but it didn’t work... NOTE: My favorites, Placecage and Fillmurray XD– hugocsl