video{ -webkit-transform: scaleX(-1); transform: scaleX(-1); } .webrtc{ display: none; position: absolute; right: 0px; height: 100%; width: 300px; } .webrtc.active{ display: block; } .webrtc, .activeCam{} .activeCam video{ position: absolute; height: 25%; top: 10px; margin: 5px; right: -100px; transition: all 0.2s ease; } .webrtc:hover .activeCam video{ right: 10px; } .activeCam video#myCamVideo{ width: 200px; height: 113px; } /*CSS size for 2 - 3 elements*/ .activeCam video:nth-child(1){ /*this is for camera of user*/ top: 75%; } .activeCam video:nth-child(2){ top: 0%; } .activeCam video:nth-child(3){ top: 25%; } .activeCam video:nth-child(4) { top: 50%; } /*btn animation*/ .btn-cam-action div{ cursor: pointer; position: absolute; border: solid 0px black; width: 44px; height: 44px; background: #666; box-shadow: 2px 2px 24px #444; border-radius: 48px; transform: translateY(12vw); transition-timing-function: ease-in-out; bottom: 20px; } .webrtc:hover .btn-cam-action div{ transform: translateY(0); } .btn-cam-action div:hover{ background: #407cf7; box-shadow: 4px 4px 48px #666; transition: 280ms; } .btn-micro{ transition: all .3s; right: 44px; } .btn-video{ transition: all .2s; right: 134px; } /*.btn-call{ transition: all .1s; left: 0px; }*/ .btn-cam-action div img{ height: 22px; width: 30px; top: calc(48px - 37px); left: calc(48px - 41px); position: relative; }