Font and rear card animation with CSS

Font and rear card animation with CSS - javascript

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>

Related

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?

Overlap issue in html card

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

CSS Animation on iOS devices

I am using a CSS flip animation to show content on one side and text on the other. The animation works using a hover selector on desktop browsers. On mobile devices it should use a touch event to carry out the flip.
It works on edge, chrome and firefox and I have added additional CSS to handle older versions of IE.
However when I run it up on my iPhone I cannot get the the flip animation to work as expected.
I have attached a fiddle to show the issue I am having.
https://jsfiddle.net/rsmith93/oehqd5j6/
$(".flip-container").hover(function() {
$(this).toggleClass('hover');
});
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 360px;
height: 270px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: rgba(33, 33, 33, 1);
color: white;
}
.name1 {
font-size: 1.5em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 40px;
left: 4px;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="row">
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 1</span>
</div>
<div class="back">
<!-- back content -->
back panel
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 2</span>
</div>
<div class="back">
<!-- back content -->
back 2
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 3</span>
</div>
<div class="back">
<!-- back content -->
back 3
</div>
</div>
</div>
</div>
Any help here is appreciated.

Left right button for slider like Bootstrap carousel

I Want to slide my images right and left on click. I use jquery for that. but problem is that when I continue to click on right the div goes right and blank space display. I tried but it not fixes. I'm a newbie in jquery.
<!DOCTYPE html><html class=''>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style class="cp-pen-styles">
.row_outer {
*overflow-x: auto;
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: 326px;
height: 192px;
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: 326px;
height: 192px;
-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-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
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;
color: #fff;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
color: #fff;
}
.row__inner:hover {
-webkit-transform: translate3d(-72.5px, 0, 0);
transform: translate3d(-72.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(215px, 0, 0);
transform: translate3d(215px, 0, 0);
}
.buttons{
position: absolute;
width: 100%;
margin-right: 10px;
font-size: 20px;
margin-top: -190px;
}
.buttons button{
height: 100%;
padding: 7px 20px;
color: #fa8f33;
border: 1px solid
}
.left{
float: left;
}
.right{
float: right;
}
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Left */
.hvr-sweep-to-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
color: white;
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style></head><body>
<div class="contain">
<div class="row_outer">
<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>
<div class="buttons">
<button class="left hvr-sweep-to-left " id="left"><span><i class="fa fa-angle-double-left" aria-hidden="true"></i>
</span></button>
<button href="" class="right hvr-sweep-to-right " id="right"><span><i class="fa fa-angle-double-right" aria-hidden="true"></i>
</span></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( "#right" ).click(function() {
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
});
$( "#left" ).click(function(){
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
});
</script>
</body></html>

You can check this out jsfiddle link
var slideIndex = 1;
var length = $(".tile").length;
$( "#right" ).click(function() {
if(slideIndex != 1){
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
slideIndex--;
}
});
$( "#left" ).click(function() {
if(slideIndex >= length-1 ){
}else{
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
slideIndex++;
}
});

Thanks to Every one who looked into it. I Fix my problem.
This is my Solution :
var $par = $('.row_outer').scrollLeft(546) ;
$('.right, .left').click(function( e ) {
e.preventDefault();
var n = $(this).hasClass("left") ? "+=182" : "-=182";
$par.animate({scrollLeft: n});
});

How to expand a 3D rectangle to show more rectangles when clicked on it?

I am new to 3D shapes in HTML and CSS. How can I create a 3D rectangle and when clicked on it the rectangle should show 3 more 3D rectangles below it and these rectangles should be clickable.
Any pointers is appreciated.

var vis = false;
var container = document.getElementById("c");
container.onclick = toggleVisibility;
function toggleVisibility() {
container.className = vis ?
"container" : "container vis";
vis = !vis;
}
img {
width: 100%;
}
.container {
position: absolute;
top: 100px;
left: 100px;
perspective: 2000px;
transform-style: preserve-3d;
transform: rotateX(40deg) rotateZ(25deg);
}
.box {
cursor: pointer;
position: absolute;
width: 160px;
height: 160px;
transform-style: preserve-3d;
}
.side {
position: absolute;
width: 160px;
height: 160px;
border: 1px solid rgba(0,0,0,.2);
}
.side-vert {
position: absolute;
width: 30px;
height: 160px;
border: 1px solid rgba(0,0,0,.2);
}
.side-hor {
position: absolute;
width: 160px;
height: 30px;
border: 1px solid rgba(0,0,0,.2);
}
.back {
transform: translateZ(-15px);
}
.left {
transform: translateX(-15px) rotateY(90deg);
}
.right {
transform: translateX(145px) rotateY(90deg);
}
.top {
transform: translateY(-15px) rotateX(90deg);
}
.bottom {
transform: translateY(145px) rotateX(90deg);
}
.front {
transform: translateZ(15px);
}
.r {
transform: translateZ(45px);
}
.g {
visibility: hidden;
transform: translateZ(0);
}
.b {
visibility: hidden;
transform: translateZ(-45px);
}
.r > * {
background-color: rgba(255, 0, 0, 0.2);
}
.g > * {
background-color: rgba(0, 255, 0, 0.2);
}
.b > * {
background-color: rgba(0, 0, 255, 0.2);
}
.vis > * {
visibility: visible;
}
<div id="c" class="container">
<div class="box r">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
<div class="box g">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
<div class="box b">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
</div>
I hope this helps!
PS: mainly inspired by this article , also, here's a jsfiddle I made with SCSS stylesheet to see the correlations between $dim and $depth and the different transforms

Develop Reference

JavaScript is the programming language of the Web.

Font and rear card animation with CSS - javascript

Related

Prevent Hover card going beyond the page

Overlap issue in html card

CSS Animation on iOS devices

Left right button for slider like Bootstrap carousel

How to expand a 3D rectangle to show more rectangles when clicked on it?

Categories

Resources