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

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

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);
}

Related

Animating web images from center to to left and right on click

I want to achieve this result of the trees moving from center to left and right on click.
I was trying this tutorial but it didn't work at all in translating the first tree from center to left.
I am working on the white arrows of the same section to see if its work and added changing the WHO WE ARE title to magenta to see if the function is working and it is but the image isn't moving at all.
<section id="abtus">
<div class=" container position-absolute" style=" left:100px; float: left; z-index: 100;">
<a href="#abtus">
<button onclick="next()"><span class="arrow1"></span></button>
</a>
</div>
<div class="container position-relative">
<div class="row mt-5 ms-5">
<div class="col offset-md-1 col-md-4">
<h3 class="text1 pb-3" id="myP">WHO WE ARE</h3>
<p class="text2 p-1">
We are two sisters who come from a similar
<br>
background of love for everything creative and magical.
</p>
<p class="text2 p-1">
We aim to deliver your stories with interesting
<br>
visually pleasing magic that separates you from the rest!
</p>
<p class="text2 p-1">
To guarantee great quality work and also an added fun
<br>
element to your project.
</p>
</div>
<div class="col col-md-4">
<h3 class="text1 pb-3">THE TEAM</h3>
<div class="row-4 pb-5 position-relative">
<p class="text2 pb-4">We have a rich experience in the market, especially
<br>
in gaming and animation. We work with several tasks
<br>
such as visual development, concept art, character design,
<br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p>
</div>
</div>
</div>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute" style="right: 200px;">
<img src="./images/tree1.png" width="800" class="img" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="./images/tree2.png" width="900">
</div>
</div>
<div class="container position-absolute" style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute " style="right: 200px;">
<img src="https://imgur.com/9d6S7wK" width="800" class="img tree1" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="https://imgur.com/VOFz7Hi" width="900">
</div>
</div>
<div class="container position-absolute " style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
</section>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
CSS
section{
background-color: pink;
height: 100%;
width: 100%;
}
tree1{
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(https://imgur.com/9d6S7wK");
background-size: 100% 100%;
width: 50%;
height: 50vh;
}
.arrow1{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(45deg);
z-index: 1;
}
.arrow2{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(225deg);
z-index: 1;
}
.img{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
;}
.img .horizTranslate{
margin-right: 80% !important;
}
.img .horizTranslateReverse{
margin-left: 0% !important;
}
}
JS
const img = document.querySelector("#img");
function next() {
document.getElementById("myP").style.color = "magenta";
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
document.getElementById("myP").style.color = "black";
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
I've included the code of this section here and uploaded the trees images. So far I managed to put the section style 100% but it is the parallax element that is driving me crazy.
Could someone please help me in figuring out what is wrong?

How to get div height based on image height?

I have some flip boxes that need a specific height. Otherwise, it does not work.
I gave them height: 220px; for testing. But this value shouldn't be 220px, it always should be the actual proportional image height.
How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?
This is my code:
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
height: 220px;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
position: relative;
background-color: #bbb;
color: black;
}
.flip_box_back {
position: absolute;
background-color: dodgerblue;
color: white;
transform: translate(0, -100%) rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.
jQuery( window ).on( "load", function($) {
$( ".flip_box" ).each(function( index ) {
let imgHeight = $(this).find('img').height();
$(this).css('height', imgHeight + 'px')
});
});
But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container

After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.
const resizeFlipBoxes = () => {
document.querySelectorAll('.flip_box').forEach(flipBox => {
flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`;
});
};
setTimeout(resizeFlipBoxes, 1);
window.addEventListener('resize', resizeFlipBoxes);
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
display: block;
}
#container {
display: flex;
flex-wrap: wrap;
}
.flip_box {
background-color: transparent;
width: 50%;
perspective: 1000px;
}
.flip_box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip_box:hover .flip_box_inner {
transform: rotateY(180deg);
}
.flip_box_front,
.flip_box_back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_box_front {
background-color: #bbb;
color: black;
}
.flip_box_back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<div id="container">
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
<div class="flip_box">
<div class="flip_box_inner">
<div class="flip_box_front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
<div class="flip_box_back">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg">
</div>
</div>
</div>
</div>

image fade in then text not working

When I keep the mouse on image, it should display the text with title and some description. This context is working only for the first image and for the remaining images it's not working.
I used jquery plugin. It's not working. Code below.
What are the changes need to be done, let me know. Thanks in advance
(function($) {
$.fn.hoverGrid = function(options) {
var settings = $.extend({
'itemClass': '.item'
}, options);
return this.each(function() {
var hoverGrid = $(this);
hoverGrid.addClass('hover-grid');
hoverGrid.find(settings.itemClass).addClass('hover-grid-item');
$(hoverGrid).find(settings.itemClass).hover(function() {
$(this).find('div.caption').stop(false, true).fadeIn(200);
},
function() {
$(this).find('div.caption').stop(false, true).fadeOut(200);
});
});
};
})(jQuery);
$(document).ready(function() {
$('#whatever').hoverGrid();
});
/*!
* jQuery Cookiebar Plugin CSS
* https://github.com/carlwoodhouse/jquery.cookieBar
*
* Copyright 2012, Mark Searle, Carl Woodhouse.
*/
.hover-grid .hover-grid-item {
width: 181px;
height: 181px;
margin: 0 18px 18px 0;
float: left;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
overflow: hidden;
position: relative;
cursor: default;
}
.hover-grid img {
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
border: 0;
position: absolute;
margin: 0;
padding: 0;
}
.hover-grid-item .caption {
background-color: #222;
width: 145px;
height: 145px;
padding: 18px;
position: absolute;
left: 0;
color: #fff;
display: none;
line-height: 1.1;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.hover-grid-item .caption p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div id="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
</div>
</div>

IDs must be unique within an html page. You can change your id=whatever to class=whatever and then use $(".whatever") to apply to all.
Updated snippet:
(function($) {
$.fn.hoverGrid = function(options) {
var settings = $.extend({
'itemClass': '.item'
}, options);
return this.each(function() {
var hoverGrid = $(this);
hoverGrid.addClass('hover-grid');
hoverGrid.find(settings.itemClass).addClass('hover-grid-item');
$(hoverGrid).find(settings.itemClass).hover(function() {
$(this).find('div.caption').stop(false, true).fadeIn(200);
},
function() {
$(this).find('div.caption').stop(false, true).fadeOut(200);
});
});
};
})(jQuery);
$(document).ready(function() {
$('.whatever').hoverGrid();
});
/*!
* jQuery Cookiebar Plugin CSS
* https://github.com/carlwoodhouse/jquery.cookieBar
*
* Copyright 2012, Mark Searle, Carl Woodhouse.
*/
.hover-grid .hover-grid-item {
width: 181px;
height: 181px;
margin: 0 18px 18px 0;
float: left;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
overflow: hidden;
position: relative;
cursor: default;
}
.hover-grid img {
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
border: 0;
position: absolute;
margin: 0;
padding: 0;
}
.hover-grid-item .caption {
background-color: #222;
width: 145px;
height: 145px;
padding: 18px;
position: absolute;
left: 0;
color: #fff;
display: none;
line-height: 1.1;
/*-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;*/
}
.hover-grid-item .caption p {
font-size: 15px;
font-weight: 400;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="whatever">
<div class="item">
<img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
<div class="caption" style="display: none;">
<h2>Some Title</h2>
<p>This is a caption to end all captions</p>
</div>
</div>
</div>
</div>
</div>
</div>

I am trying to open a modal window with some effect

The openModal() function gets called on the click of a function.
I checked on Google that the transition property doesn't work with the display property in CSS. The other way round is to do it with opacity. But I am unable to call animation from JavaScript for CSS property.
var whm, whs, whd, whc;
function openModal(a) {
whm="myModal"+a;
whs="mySlides"+a;
whd="demo"+a;
whc="caption"+a;
document.getElementById(whm).style.display = "block";
document.getElementById(whm).style.opacity = "1";
// document.getElementById(whm).classList.add('didLoad');
//document.getElementById(whm).className += " didLoad";
document.getElementById(whm).style.webkitTransition = "background 2s";
}
.modal {
display: none;
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
Whole code
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.didLoad
{
background-color: black;
transition: background-color 2s;
-webkit-transition: background-color 2s;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(1);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(2);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(3);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(4);currentSlide(1)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x301" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x302" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x303" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x304" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1401" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1402" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1403" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1404" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x201" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x202" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x203" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x204" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1301" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1302" style="width:100%" onclick="currentSlide(2)" alt="bhai bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1303" style="width:100%" onclick="currentSlide(3)" alt="bhai bhai bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1304" style="width:100%" onclick="currentSlide(4)" alt="fuck off">
</div>
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<div id="myModal4" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides4">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
var whm, whs, whd, whc;
function openModal(a) {
whm="myModal"+a;
whs="mySlides"+a;
whd="demo"+a;
whc="caption"+a;
document.getElementById(whm).style.display = "block";
document.getElementById(whm).style.opacity = "1";
// document.getElementById(whm).classList.add('didLoad');
//document.getElementById(whm).className += " didLoad";
document.getElementById(whm).style.webkitTransition = "background 2s";
}
function closeModal() {
document.getElementById(whm).style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName(whs);
var dots = document.getElementsByClassName(whd);
var captionText = document.getElementById(whc);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>

Transitions don't work with display but with a new class and CSS animations, you can do some nice things (I only animated the 'show') :
var show = document.getElementById('show');
var hide = document.getElementById('hide');
show.addEventListener("click", function() {
document.getElementById('hello').classList.add("active");
});
hide.addEventListener("click", function() {
document.getElementById('hello').classList.remove("active");
});
#content {
position: relative;
text-align: center;
}
#hello {
position: absolute;
padding: 10px;
background-color: yellow;
text-align: center;
left: 0;
right: 0;
display: none;
opacity: 0;
}
#hello.active {
display: block;
opacity: 1;
animation: fadeIn .4s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div id="content">
<div id="hello">
<p>Hello world !</p>
<button id="hide">Hide</button>
</div>
<button id="show">Show</button>
</div>

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});
});

Develop Reference

JavaScript is the programming language of the Web.

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

Related

Animating web images from center to to left and right on click

How to get div height based on image height?

image fade in then text not working

I am trying to open a modal window with some effect

Left right button for slider like Bootstrap carousel

Categories

Resources