Develop Reference

Prevent Hover card going beyond the page

So I was trying to make a contact card on hover like twitter. When a person hover on a contact name, the card will appear. It is working fine. But it is going beyond the page.
What I need is, show it up and down according to the position.
This is my code
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
bottom: 40px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: 0;
bottom: -20px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #d9dcde transparent;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, 10px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message p {
text-align: left;
font-size: 13px;
margin: 0;
}
<div class="popover__wrapper m-t-5">
<a>Arshad</a>
<div class="push popover__content">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 no-padding">
<div class="widget-item user ">
<div class="tiles user-dp">
<div class="tiles-body no-padding">
<img src="../assets/img/profiles/arshad-small.jpg" alt="">
<div class="overlayer bottom-right fullwidth">
<div class="overlayer-wrapper">
<div class=" p-l-20 p-r-20 p-b-20 p-t-20">
<div class="text-center"> <a class="hashtags"> Administrator </a> </div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="tiles white ">
<div class="tiles-body">
<div class="row">
<div class="user-comment-wrapper pull-left">
<div class="comment">
<div class="user-name text-black semi-bold">Full Name </div>
<div class="preview-wrapper">Designer</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="p-l-15 p-r-20 popover__message">
<p>phone</p>
<p>Email</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried many methods, didn't find exactly. So how do I achieve it? Any help?

How to properly rotate a cube on click?

So what I'm trying is basically rotating a cube by clicking on buttons that are either located right on the cube or floating next to it. For now I keep them floating because I was trying out a lot and it prooved to be easier this way, but placing them on the cube would be no problem at all.
The ACTUAL problem is that not all rotation axes seem to be treated equally. What I mean by that is that if I rotate along X, the Y and Z axes rotate aswell. But if I rotate along Y (or Z), the Z-axis (or Y-axis) rotate BUT the X-axis ALWAYS STAYS THE SAME.
In my code this means that no matter how the cube is rotated, the rotation along the X-axis, triggered by clicking on the red squares "3" or "4" will always rotate the cube up or down whilst the other buttons rotate the cube according to its position.
Don't mind that the numbers 1,2,5 and 6 get switched. This is just the closest I could get to a solution but rotating the cube randomly for a while will always result in strange movement sooner or later.
My code:
var rotationX = 0;
var rotationY = 0;
var rotationZ = 0;
var rotation = 0;
var translate = 0;
function showDebug() {
var deBugInfo = '<p>X: '+rotationX + '</p>';
deBugInfo += '<p>Y: '+rotationY + '</p>';
deBugInfo += '<p>Z: '+rotationZ + '</p>';
$('#deBug').html(deBugInfo);
}
function cubeRotate() {
$('#cube').css('transform', 'rotateX('+rotationX+'deg) rotateY('+rotationY+'deg) rotateZ('+rotationZ+'deg)');
showDebug();
}
/*
function buttonsRotate() {
$('#buttons').css('transform', 'rotate('+rotation+'deg) translate('+0+')');
showDebug();
}
*/
$(function () {
$('#dir1').on('click', function () {
//var myStyle = $('#cube').css('transform');
//console.log(myStyle);
//rotationY = rotationY - 90;
rotationY -= 90;
cubeRotate();
});
$('#dir2').on('click', function () {
rotationY += 90;
cubeRotate();
});
$('#dir3').on('click', function () {
rotationX -= 90;
cubeRotate();
rotation -= 90;
// buttonsRotate();
});
$('#dir4').on('click', function () {
rotationX += 90;
cubeRotate();
rotation += 90;
// buttonsRotate();
});
$('#dir5').on('click', function () {
rotationZ += 90;
cubeRotate();
});
$('#dir6').on('click', function () {
rotationZ -= 90;
cubeRotate();
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
position: absolute;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transition-duration: 0.5s;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div id="deBug">
</div>
<div class='arrow' id='dir3'>X-</div>
<div class='arrow' id='dir4'>X+</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y-</div>
<div class='arrow' id='dir2'>Y+</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
<div id="cube">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="achse achseX"></div>
<div class="achse achseY"></div>
<div class="achse achseZ"></div>
</div>
</body>
</html>
I've tried giving every single element the "transform-style: preserve-3d". Didn't work.
I think it could actually better work with the buttons on the cube but that's a question to be answered later and NOT the subject here.
If anyone has an idea how to get ALL AXES TREATED EQUALLY, please tell me, I'm slowly getting mad af with this cube :D
Thank you!
Edits:
2018_04_18:
Also tied to set the tranform origin without success.
2018_04_19:
Updated the snippet so the buttons don't rotate anymore but are fixed so you can always click them.
2018_04_20:
I found two examples from pencode that could be helpful (they both work by dragging the cube with the mouse, I'm not sure if that's got something to do with the problem)...
https://codepen.io/jordizle/pen/haIdo/
This cube has the nice aspect that the sides automatically rotate so that they can be read properly. However if you rotate it to sides 1 or 6, it shows the same problem as my cube does as it simply won't rotate left or right.
https://codepen.io/ge1doot/pen/PqZKbv
In this example the problem seems to be solved. No matter the cube's position you can always spin it in every direction. (I won't need the function to split it however)
My problem is that I can't really see what's the difference between the scrips they use and therefore I don't know why the second one rotates perfectly but I have a feeling this is the right track. If anyone could compare them and solve this mystery it would be really nice ;)

Your problem is caused by something called Euler Order. Basically, it's in what order the axes are used to calculate the final rotation.
The CSS transform Euler Order is the most common one: X, Y, Z.
The X-axis is computed first, so it's always stuck to its resting position. You cannot change the Euler Order in CSS. Even if you could, the first axis of the Euler Order will always be "not treated equally."
Another problem with Euler Rotation is Gimbal Lock. Click X, click Y, and click Z in your demo. Now try rotating X and Z. They're the same! You've just encountered Gimbal Lock, which is super hard to solve and not possible to fix with just CSS.

RELATIVE ROTATION - AXES ROTATE WITH THE CUBE
function rotate(axis, degrees) {
cube.outerHTML = `<div class='gimbal' id='container' style="transition: all 0.5s; transform-style: preserve-3d; transform: rotate${axis}(0deg); position: relative; transition-timing-function: ease-in-out; width: 0; height: 0; transform-origin: 50vw 50vh;">${cube.outerHTML}</div>`;
window.setTimeout(function () {
container.style.transform = `rotate${axis}(${degrees}deg)`;
container.removeAttribute('id');
}, 10);
}
$('#dir1').on('click', function () {
rotate('Y', '90');
});
$('#dir2').on('click', function () {
rotate('Y', '-90');
});
$('#dir3').on('click', function () {
rotate('X', '90');
});
$('#dir4').on('click', function () {
rotate('X', '-90');
});
$('#dir5').on('click', function () {
rotate('Z', '90');
});
$('#dir6').on('click', function () {
rotate('Z', '-90');
});
rotate('X', '0');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50vh; left: 50vw;
transform-style: preserve-3d;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="cube" class="gimbal">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y+</div>
<div class='arrow' id='dir2'>Y-</div>
<div class='arrow' id='dir3'>X+</div>
<div class='arrow' id='dir4'>X-</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
</body>
</html>
GLOBAL ROTATION - AXES DON'T ROTATE WITH THE CUBE
function rotate(axis, degrees) {
let outermostRotator = $('body > .gimbal').get(0);
outermostRotator.outerHTML = `<div class='gimbal' id='container' style="transition: all 0.5s; transform-style: preserve-3d; transform: rotate${axis}(0deg); position: relative; transition-timing-function: ease-in-out; width: 0; height: 0; transform-origin: 50vw 50vh;">${outermostRotator.outerHTML}</div>`;
window.setTimeout(function () {
container.style.transform = `rotate${axis}(${degrees}deg)`;
container.removeAttribute('id');
}, 10);
}
$('#dir1').on('click', function () {
rotate('Y', '90');
});
$('#dir2').on('click', function () {
rotate('Y', '-90');
});
$('#dir3').on('click', function () {
rotate('X', '90');
});
$('#dir4').on('click', function () {
rotate('X', '-90');
});
$('#dir5').on('click', function () {
rotate('Z', '90');
});
$('#dir6').on('click', function () {
rotate('Z', '-90');
});
rotate('X', '0');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50vh; left: 50vw;
transform-style: preserve-3d;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="cube" class="gimbal">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y+</div>
<div class='arrow' id='dir2'>Y-</div>
<div class='arrow' id='dir3'>X+</div>
<div class='arrow' id='dir4'>X-</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
</body>
</html>

Content Slider stop and start in accordion

I have code below for a Pure CSS content slider in an accordion I have created. Is it possible to start and stop the Content Slider when the accordion is opened and closed? Currently the Content Slider keeps running even if the accordion is closed. Is this possible with Pure CSS? If not would this be possible with Vanilla JavaScript (no JQuery). Anything helps, cheers.
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight:bold;
color: #005bab;
}
.top {
margin-top:-20px;
text-align: center;
font-size:13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 12px;
text-align: center;
width: 200px;
top: 45px;
margin-left:-35px;
bottom: 0;
position: absolute;
z-index: 99;
}
.circleinv{
width: 130px;
height: 130px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:5px;
border-color:transparent;
}
.arrow {
width:145px;
height:45px;
}
.arrowinv {
visibility:hidden;
width:145px;
height:50px;
}
.flipimage {
width:145px;
height:45px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
.ul {
animation: slidli 90s infinite linear;
}
.ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-733.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span></p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Content Slider</label>
<div class="tab-content">
<div class="container">
<div class="everything">
<div id="scroller" style="width: 400px; height: 255px; margin: 0 auto;">
<div class="innerScrollArea">
<ul class="ul">
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupes-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 2-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<!--Dupe 3-->
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:49px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
</li>
<li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
<li>
<div class="circleinv">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>

I would normally advise that you do this kind of stuff with JS but if you want to avoid it here's a working (albeit verbose) solution:
replace
.ul:hover {
animation-play-state:paused;
}
with
.input:checked~.tab-content .container .ul:hover {
animation-play-state:paused;
}
.tab-content .container .ul{
animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
animation-play-state:running;
}
Here's a pen showing the solution.
https://codepen.io/anon/pen/zzaKow

Font and rear card animation with CSS

I am trying to develop my webpage with some animation effects, and I have three cards with front and back flip animation effect. Now I am looking for front and back animation effect, which I have described in below image clearly.
Image before front and back animation (Initially).
Image after click on card-2,
Example:
var accHD = document.getElementsByClassName('card');
var showNotificationBtn = document.getElementsByClassName('showsettingsbutton');
for (i = 0; i < accHD.length; i++) {
showNotificationBtn[i].addEventListener(
'click', function toggleItem() {
var itemClass = this.parentNode.parentNode.parentNode.className;
for (i = 0; i < showNotificationBtn.length; i++) {
showNotificationBtn[i].parentNode.parentNode.parentNode.parentNode.parentNode.className = 'card';
showNotificationBtn[i].parentNode.parentNode.parentNode.className = 'flipper';
}
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = 'cardlarge';
this.parentNode.parentNode.parentNode.className = 'flipperRotaion';
}
);
}
.card {
padding: 30px;
background: #fff;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
transition: 0.3s;
width: 10%;
z-index: 1;
}
.container {
padding: 2px 16px;
}
.cardlarge {
padding: 30px;
background: #fff;
transition: 0.3s;
width: 10%;
-moz-transition: all 2s; -webkit-transition : all 2s; -o-transition :
all 2s; transition : all 2s;
z-index: 2;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
/*Card Design ends here*/
/*Flip Design starts here*/
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
*/
.flipperRotaion {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/*Flip Design ends here*/
/*Show Notification button design starts here*/
.showsettingsbutton {
border: 0;
background: #0087cc;
border-radius: 4px;
box-shadow: 0 5px 0 #006599;
color: #fff;
cursor: pointer;
font: inherit;
margin: 0;
outline: 0;
padding: 12px 20px;
transition: all .1s linear;
}
.showsettingsbutton:active {
box-shadow: 0 2px 0 #006599;
transform: translateY(3px);
}
<div class="cardlist" align="center">
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
<input type="checkbox" name="Notification" value="Email">Email
</div>
</div>
</div>
</div>
</div>
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
Back
</div>
</div>
</div>
</div>
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
</div>
</div>
</div>
</div>
</div>

Netflix style image continuous carousels with mouse-over with Bootstrap support

Can someone suggest any Twitter Bootstrap supported jquery plugins that can provide Netflix style continuously scrolling image carousel with mouse-over?
I have already explored the carousel provided in Bootstrap JS library but it requires click of button and is not continuously scrolling, but instead just scrolls the full set of images under an item.
Any info of such cool plugins is greatly appreciated

Though not bootstrap/jquery based, but even better (pure css!), I came across one which is a decent place to start at and extend
HTML:
<div class="contain">
<h1>Pure CSS Netflix Video Carousel</h1>
<p>
Inspired by Eli White's article Performant CSS Animations: Netflix Case Study, his example pen, and Matt Taylor's CSS-only version.
</p>
<div class="row">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body,
html {
padding: 0 10px;
margin: 0;
background: #0e0f11;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1,
p {
text-align: center;
}
p {
width: 100%;
max-width: 500px;
margin: auto;
}
a:link,
a:hover,
a:active,
a:visited {
-webkit-transition: color 150ms;
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
.contain {
width: 100%;
}
.row {
overflow: scroll;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: '▶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}