We Keep Coding

Use same javascript function for different overlay IDs

I want to display the overlay for different links. 1st overlay has an image and text whereas if we click link2 it must display overlay2 having same structure but diff content. Please help me get the desired output.
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}
<div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
1. List item

There are better ways to achieve this, however as per your requirement you may pass different ids &actions as params to same function like so
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
function toggle(id, value) {
document.getElementById(id).style.display = value;
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
font-size: 50px;
color: black;
transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay', 'block')"></a>
</div>
<div id="overlay1" onclick="toggle('overlay1', 'block')">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay1', 'block')"></a>
</div>
</div>
</div>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a> 1. List item

How to make owl carousal vertical

I'm trying to make the owl carousel vertical as shown below image:
Kindly suggest if anyone knows some other similar control.
$(function() {
// Owl Carousel
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 3,
margin: 10,
rtl: true,
center: true,
loop: true,
nav: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
});
.home-demo .item {
background: #ff3f4d;
}
.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
.owl-carousel .owl-item.active.center {
margin-top: 0 !important;
position: relative;
z-index: 999;
-webkit-transform: scale(1);
transform: scale(1);
}
.owl-carousel .owl-item {
transform: scale(0.7);
padding: 10px 0px;
transition: all 0.5s;
transform: scale(60%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="home-demo">
<h3>Carousel</h3>
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>

Add owl-carousel slider properties and some css
$(function(){
$('.owl-carousel').owlCarousel({
items: 1,
loop: false,
nav: false,
margin: 0,
autoplay: true,
dots:false
});
$('.owl-carousel').data('owl.carousel').difference = function(first, second) {
return {
x: first.x - second.x + (first.y - second.y),
y: first.y - second.y
};
};
});
.home-demo .item {
background: #ff3f4d;
}
.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
.owl-carousel {
display:block
}
.owl-carousel .owl-item.active.center {
margin-top: 0 !important;
position: relative;
z-index: 999;
-webkit-transform: scale(1);
transform: scale(1);
}
.owl-carousel .owl-item {
transform: scale(0.7);
padding: 10px 0px;
transition: all 0.5s;
transform: scale(60%);
}
.owl-carousel-vertical{
transform: rotate3d(0, 0, 1, 90deg);
}
.owl-carousel-vertical .item{
transform: rotate3d(0, 0, 1, -90deg);
}
.owl-nav{ transform: rotate3d(0, 0, 1, 0deg); }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="home-demo">
<h3>Carousel</h3>
<div class="owl-carousel owl-theme owl-carousel-vertical">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>
For more reference please visit this link Click..

Custom animation start on button click? HTML, CSS, JS [duplicate]

This question already has answers here:
Trigger CSS Animations in JavaScript
(10 answers)
Closed 4 years ago.
Right now I'm trying to add an animation to a div when I press a button.
However, I'm not sure on how to trigger a custom animation on button click with JavaScript or jQuery. As of now I do not have any JavaScript written for this.
Im very new to this, hence me asking the pro's!
HTML:
<div class="container" id="frontPage">
<div "container">
<h1 class="header center green-text">ABOUT</h1>
<div class="row center">
<p class="header col s12 light">Something here</p>
</div>
</div>
<div class="row center padding-bottom-1">
<a a href="{{ url('/loginpage') }}" class="btn-small green" id="loginButton">login</a>
<a class="btn-small green">apply</a>
</div>
</div>
CSS:
#frontPage {
text-align: center;
margin-top: 80px;
position: relative;
animation-name: slideOutLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
width: 500px;
}
#keyframes slideOutLeft {
0% {left: 0;}
100% {left: -1500px;}
}

To trigger a CSS animation on a button click you can put the CSS rules in their own class. You can then apply that class to the required elements when your button is clicked, like this:
$(function() {
$('button').click(function() {
$('#frontPage').addClass('slideOutLeft');
});
});
#frontPage {
text-align: center;
margin-top: 80px;
position: relative;
width: 500px;
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
#keyframes slideOutLeft {
0% {
left: 0;
}
100% {
left: -1500px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div class="container" id="frontPage">
<div id="container">
<h1 class="header center green-text">ABOUT</h1>
<div class="row center">
<p class="header col s12 light">Something here</p>
</div>
</div>
<div class="row center padding-bottom-1">
<a a href="#" class="btn-small green" id="loginButton">login</a>
<a class="btn-small green">apply</a>
</div>
</div>

Stop CSS animation when class added

Hello My Question is how to stop the wheel rotation when the car come in the screen, Every time when any car come in screen please stop the wheel rotation.
Here My Code:
$(document).ready(function () {
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .wheelInCar').css('background-image',
'url(' + getImgWheel + ')'
);
});
var running = false;
$('.car-model').click(function (e) {
e.preventDefault();
var index = $(this).data("index");
var $pre = $('.car-image.current');
var $dom = $('.car-image[data-car-index="' + index + '"]');
if ($dom.hasClass("current") || running) {
return;
}
var current_pull = parseInt($('.current').css('transform').split(',')[5]);
running = true;
$dom.addClass('current');
$pre.addClass('left').removeClass('current');
setTimeout(function () {
if (current_pull == 0) {
$('.wheelInCar').css('animation-play-state', 'paused');
}
else {
$('.wheelInCar').css('animation-play-state', 'running');
}
$pre.addClass('no-transition');
$pre.removeClass('left');
setTimeout(function () {
$pre.removeClass('no-transition');
running = false;
}, 100);
}, 2100);
});
})
.car { /* My Container */
height: 600px;
padding: 40px 0;
background-color: #efefef;
overflow: hidden;
}
.car .click { /* Click Button */
width: 100%;
padding: 10px;
text-align: center;
border: 1px solid #0094ff;
margin-bottom: 30px;
}
.car-image { /* The Cars*/
position: absolute;
top: 100px;
margin-bottom: 30px;
transform: translate(calc(50vw + 400px), 0);
transition: all 2s ease-in-out;
//width:50vw;
}
.car .car-image.current /* When Click the current car will be animated to translate (0, 0) */ {
transform: translate(0, 0);
display: block;
}
.car .car-image.left /*When The Car go out of the screen */ {
transform: translate(calc(-50vw - 400px), 0);
display: block;
}
.car .car-image.no-transition {
transition: none; /* Remove the transition*/
}
.car .car-image .wheelInCar {
width: 99px;
height: 100px;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
/* Rotating the Car Wheel, What I Need to stop the Wheel Animation When Car go into the screen but run Car Wheel when the car started to left the screen */
-webkit-animation: wheelRotating 2s linear infinite;
-moz-animation: wheelRotating 2s linear infinite;
-ms-animation: wheelRotating 2s linear infinite;
-o-animation: wheelRotating 2s linear infinite;
animation: wheelRotating 2s linear infinite;
}
.car .car-image .wheelInCar.left {
background-image: url('http://store6.up-00.com/2017-03/148992740531661.png');
top: 94px;
left: 98px;
}
.car .car-image .wheelInCar.right {
background-image: url('http://store6.up-00.com/2017-03/148992740544512.png');
top: 94px;
right: 75px;
}
.car .wheelEleContainer {
cursor: pointer;
}
/*Rotating Car Wheels*/
#keyframes wheelRotating {
from {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="car">
<div class="container">
<div class="row">
<div class="car-button-container">
<div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-md-2 col-sm-3 col-s-6">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image current" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Please Run code snippet in fullscreen

Try this code
$(document).ready(function () {
run();
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .wheelInCar').css('background-image',
'url(' + getImgWheel + ')'
);
});
var running = false;
$('.car-model').click(function (e) {
e.preventDefault();
var index = $(this).data("index");
var $pre = $('.car-image.current');
var $dom = $('.car-image[data-car-index="' + index + '"]');
if ($dom.hasClass("current") || running) {
return;
}
running = true;
$dom.addClass('current');
$pre.addClass('left').removeClass('current');
setTimeout(function () {
$pre.addClass('no-transition');
$pre.removeClass('left');
setTimeout(function () {
$pre.removeClass('no-transition');
running = false;
}, 100);
}, 2100);
run();
});
function run(){
$(".car-image.current").removeClass("in");
$(".car-image.current").removeClass("out");
setTimeout(function(){
$(".car-image.current").addClass("in");
},1000);
setTimeout(function(){
$(".car-image.current").addClass("out");
},5000);
}
})
.car{
height:600px;
padding:40px 0;
background-color:#efefef;
overflow:hidden;
}
.car .click{
width:100%;
padding:10px;
text-align:center;
border:1px solid #0094ff;
margin-bottom:30px;
}
.car-image {
position:absolute;
top: 100px;
margin-bottom: 30px;
-moz-transform: translate(160%, 0);
-ms-transform: translate(160%, 0);
-o-transform: translate(160%, 0);
-webkit-transform: translate(160%, 0);
transform: translate(160%, 0);
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.car .car-image.current {
display:block;
transform: translateX(200%);
transition:all 1s ease;
}
.car .car-image.left {
-moz-transform: translate(-160%,0);
-ms-transform: translate(-160%,0);
-o-transform: translate(-160%,0);
-webkit-transform: translate(-160%,0);
transform: translate(-160%,0);
display:block;
}
.car .car-image.no-transition {
transition:none;
}
.car .car-image .wheelInCar{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
}
.car .car-image .wheelInCar.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top:94px;
left:98px;
}
.car .car-image .wheelInCar.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top:94px;
right:75px;
}
.car .wheelEleContainer{
cursor:pointer;
}
.car .car-image.current.in{
transform:translateX(100px);
transition:all 2.6s ease-in;
}
.car .car-image.current.out{
transform:translateX(-200%);
transition:all 2.6s ease-out;
}
.car .car-image.current.in .wheelInCar{
animation: wheelRotatingIn 2s ease-in 1.3;
}
.car .car-image.current.out .wheelInCar{
animation: wheelRotatingOut 2s ease-out 1.3;
}
#keyframes wheelRotatingIn {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(800deg); }
100% { -webkit-transform: rotate(1000deg); }
}
#keyframes wheelRotatingOut {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(800deg); }
100% { -webkit-transform: rotate(1600deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<div class="row">
<div class="car-button-container">
<div class="col-xs-6 col-sm-3 col-md-2 col-md-offset-2 ">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image current" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="wheelInCar left"></div>
<div class="wheelInCar right"></div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>

One liner to the CSS:
.car .car-image .wheelInCar {
width: 99px;
height: 100px;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
-webkit-animation: wheelRotating 2s linear infinite;
-moz-animation: wheelRotating 2s linear infinite;
-ms-animation: wheelRotating 2s linear infinite;
-o-animation: wheelRotating 2s linear infinite;
animation: wheelRotating 2s linear infinite;
animation-play-state: paused; /* Not exactly one line if you want to make compatible with prefixes */
}

How to Flip Div's in Randomly

I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.

I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);

Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)