CODEWITHSUNDEEP
htmlcssanimationcss-animations
Gonzalo
Gonzalo

Reputation: 329

Hide overflow animation reflect div

I'm trying to make an animation to a div but the problem is that the div that makes the reflect goes makes the transition out of the button.

How can I achieve to superpose the reflection div inside the button div?

body {
  background-color: grey
}

.outer-div {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.status-label {
    display: flex;
    width: 30%;
    justify-content: center;
    padding: 0.35em;
    color: white;
    border-radius: 30px;
    font-weight: bold;
    background-color: blue;
}

.animate-label:before {
  content: "";
  position: absolute;
  width: 30%;
  top: -5%;
  height: 105%;
  right: 100%;
  opacity: 0.2;
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.5);
  background: linear-gradient( to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.7) 77%, rgba(255, 255, 255, 0.2) 92%, rgba(255, 255, 255, 0.25) 100%);
  animation: shine 2s infinite;
  animation-delay: 0s;
}

@keyframes shine {
  to {
    opacity: 1;
    right: 40%;
  }
}
  <div class="outer-div">
    <div class="status-label animate-label"> 
      <span> Preparing button </span>
    </div>
  </div>

Thanks in advance.

Upvotes: 0

Views: 61

Answers (1)

david
david

Reputation: 91

You're setting the overflow: hidden; property on the wrong container. Since .outer-div is 100% wide there's nothing to be "cut away" relatively to .status-label.
You have to set the overflow property to the .status-label.animate-label container as well as make that one position: relative;. Then you can adapt the properties of .animate-label and @keyframes shine according to your desire.

Working example

Upvotes: 1

Related Questions