mixing two different containers - html

Question

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">×</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.

Answer 1

add the wave to the play-video element
remove the margins from wave element
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">×</a>
</div>
</section>