CODEWITHSUNDEEP
htmlcss
foxer
foxer

Reputation: 901

mixing two different containers

I have two different containers one contains a play button with animation effects and the other is just a wave animation.

I can't find a solution to make them one by putting the play button over the wave animation so that we have a play button with a wave effect outside. 

/*Video Player*/

.videoContainer {
  padding-top: 10rem;
}


.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;
}



.video-overlay {
  position: fixed;
  width: 100%;
  height: auto;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 10px;
  background: rgba(0,0,0,0.80);
  opacity: 0;
  transition: all ease 500ms;
}

.video-overlay.open {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 1;
}

.video-overlay-close {
  position: relative;
  z-index: 1000;
  top:75px;
  right: 75px;
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
}

.video-overlay-close:hover {
  color: #fa183d;
}

.video-overlay iframe {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
   width: 80%; 
  height: 80%;
  box-shadow: 0 0 15px rgba(0,0,0,0.75);
}







/*=======================================================
      VIDEO POP UP:
========================================================*/

 .waves-block {
    position: relative;

    margin-top: 260px;
    margin-bottom: 100px;
    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: 384px;
    width: 24rem;
    height: 384px;
    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 id="play-video" class="video-play-button" href="#">
          <span></span>
          </a>


          <div id="video-overlay" class="video-overlay">
          <a class="video-overlay-close">&times;</a>
          </div>


         

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

I have tried to change the positions but because of the margins, it was a failure.

Any suggestions would be greatly appreciated.

Upvotes: 0

Views: 44

Answers (1)

xTrimy
xTrimy

Reputation: 823

  1. add the wave to the play-video element
  2. remove the margins from wave element
  3. set wave element to position:absolute; instead of relative

/*Video Player*/

.videoContainer {
  padding-top: 10rem;
}


.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;
}



.video-overlay {
  position: fixed;
  width: 100%;
  height: auto;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 10px;
  background: rgba(0,0,0,0.80);
  opacity: 0;
  transition: all ease 500ms;
}

.video-overlay.open {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 1;
}

.video-overlay-close {
  position: relative;
  z-index: 1000;
  top:75px;
  right: 75px;
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
}

.video-overlay-close:hover {
  color: #fa183d;
}

.video-overlay iframe {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
   width: 80%; 
  height: 80%;
  box-shadow: 0 0 15px rgba(0,0,0,0.75);
}







/*=======================================================
      VIDEO POP UP:
========================================================*/

 .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: 384px;
    width: 24rem;
    height: 384px;
    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 id="play-video" 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 id="video-overlay" class="video-overlay">
          <a class="video-overlay-close">&times;</a>
          </div>


   

</section>

Upvotes: 1

Related Questions