CODEWITHSUNDEEP
htmlcss
foxer
foxer

Reputation: 901

Resize element on resizing window

How can we resize this play button element if the page is resized?

I want the play button to get smaller if the page is getting smaller ...

I'd like the play button to resize when I resize the screen.

It's sort of complicated for me so any help would be appreciated.

.videoContainer {
  padding-top: 14rem;
}


.video-play-button {
  position: relative;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ba1f24;
  border-radius: 50%;

}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #fa183d;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

.waves-block {
    position: absolute;
    float: center; 
    width: 384px;
    width: 24rem;
    height: 384px;
    height: 24rem;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.waves-block .waves {
    position: absolute;
    width: 24rem;
    height: 24rem;
    background: rgb(178, 163, 214, 0.2);
    opacity: 0;
    border-radius: 320px;
    -webkit-animation: waves 3s ease-in-out infinite;
    animation: waves 3s ease-in-out infinite;
}

.waves-block .wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
 .waves-block .wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.waves-block .wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}


@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    50% {
        opacity: 0.9;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}
<section class="videoContainer">

          <a class="video-play-button" href="#">
          <span></span>

          <div class="waves-block">
            <div class="waves wave-1"></div>
            <div class="waves wave-2"></div>
            <div class="waves wave-3"></div>
          </div>

          </a>

 </section>

ar when I resize the screen width the size of the play button doesn't change.

Upvotes: 1

Views: 49

Answers (2)

focus.style
focus.style

Reputation: 6750

I'v seen you previous wersion of this question. And already write the answer. Please take a look, maybe it will clear something to you.

With all this setting .video-play-button should be position: absolute;

UPDATED

Rewrited all the inner elements of .video-play-button for % scales.

Now the main magic is here. The vw are the viewport width. 7vw = 7% of a viewport.

.video-play-button {
  width: calc(20px + 7vw);
  height: calc(20px + 7vw);
}


.videoContainer {
  text-align: center;
}

.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: calc(20px + 7vw);
  height: calc(20px + 7vw);
  /* background: #fa183d; */
  border-radius: 50%;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ba1f24;
  border-radius: 50%;
}

.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fa183d;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}

.video-play-button span {
  display: block;
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
  width: 40%;
  height: 45%;
  background: #fff;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

.video-box-computer {
  position: relative;
  display: inline-block;
  width: 45%;
  top: 180px;
}

.videoImage {
  width: 100%;
}

.waves-block {
  position: absolute;
  width: 500%;
  height: 500%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.waves-block .waves {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(178, 163, 214, 0.2);
  opacity: 0;
  border-radius: 50%;
  -webkit-animation: waves 3s ease-in-out infinite;
  animation: waves 3s ease-in-out infinite;
}

.waves-block .wave-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.waves-block .wave-2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.waves-block .wave-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

@keyframes waves {
  0% {
    -webkit-transform: scale(0.2, 0.2);
    transform: scale(0.2, 0.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  50% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  }
  100% {
    -webkit-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
<section class="videoContainer">

  <div class="video-box-computer">
    <img class="videoImage" src="http://demo.graygrids.com/themes/beam/imgs/macbook.png">
    <a id="play-videoA" class="video-play-button" href="#">
      <span></span>

      <div class="waves-block">
        <div class="waves wave-1"></div>
        <div class="waves wave-2"></div>
        <div class="waves wave-3"></div>
      </div>

    </a>
  </div>


</section>

Upvotes: 1

Val
Val

Reputation: 156

Try to use 'vw' units for width and 'vh' for height properties instead of 'px'.

Upvotes: 0

Related Questions