Display previous images stored in an array - javascript

I have a gallery that will open a modal when you click on an image or video. I am now trying to implement a previous and next button. I've been unable to get it working completely, I can only get it to display ONLY the previous image/video that the user initially clicked. I cannot get it to continually display the previous or after images/videos.
I feel like some sort of loop could do the trick, but I personally couldn't figure out the condition of a loop in order for it to loop properly.
Here is a https://jsfiddle.net/Boros/r9nsyw0m/
If you click on any image or video itself(not the play button), then click the previous arrow, you will see it displays the correct previous image/video. However, if you try to press the previous button again, nothing happens. Another issue is the next button doesn't even work. I have no idea why since it should be the exact same code as the previous button except it just adds one to the index instead of subtracting one like the previous button code. You may need to refresh after closing the modal after you clicked the previous button since it will display the incorrect image/video if you re-open the modal.
Line 50: Previous button
$("#previous").addEventListener("click", evt => {
slides[g].style.display = "none";
slides[g - 1].style.display = "initial";
});
Line 55: Next button
$("#next").addEventListener("click", evt => {
slides[g].style.display = "none";
slides[g + 1].style.display = "initial";
});
I've been learning JS for a couple months now so the code might be all over the place but I am happy I was able to get this far on this project.


I had a little look at the newer version of the code and whilst it is better it still has issues - the main being that the navigation still does not work. There appears to be a lot of repetition within the various parts of the code and I ended up approaching from a different direction to achieve what I hope was the stated goal. I may not have implemented all the things I see in the original - such as removing the tabindex attributes or other such. I also could not understand why there is duplication of the images/videos on the page other than to provide content for the modal - so these items were removed explicitly from the modal so that they can be copied/cloned later when actually needed.
(function(){
'use strict';
let index;
const d=document;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
const col=qa('#gallery img,#gallery video');
const _length=col.length-1;
const modal=q('#my_modal');
const receiver=q('.receiver',modal);
const setdisplay=(n,s)=>n.style.display=s;
const setoverflow=(n,s)=>n.style.overflow=s;
const setindex=(i)=>qa('[data-type="nav"]').forEach(n=>n.dataset.index=i);
const pausevideos=()=>qa('video').forEach(n=>n.pause());
const clearstyle=(c)=>qa('[data-type="nav"]').forEach(n=>n.classList.remove(c));
const warn=(e,a,b,c)=>{
clearstyle(c);
if( a==b )e.target.classList.add(c)
};
const setinitialstate=(i,c)=>{
clearstyle(c);
if( i==0 )q('[data-task="prev"]').classList.add(c)
if( i==_length )q('[data-task="next"]').classList.add(c)
}
const _CN='red';
/*
Define all the event handlers for
the modal buttons etc
*/
const closeclickhandler=(e)=>{
receiver.innerHTML='';
pausevideos();
setdisplay(modal,'none');
setoverflow(d.body,'initial');
return true;
};
/*
The prev/next handlers could be a single function
that processes the dataset to fork the logic within.
Find the index from the button and use that to determine
and display the next/prev item. The `setcontent` function
takes the item and clones it so it can be displayed.
*/
const previousclickhandler=(e)=>{
index=e.target.dataset.index;
if( index > 0 ){
index--;
warn(e,index,0,_CN);
setindex(index);
setcontent(col[index]);
}
return true;
};
const nextclickhandler=(e)=>{
index=e.target.dataset.index;
if( index < _length){
index++;
warn(e,index,_length,_CN);
setindex(index);
setcontent(col[index])
}
return true;
};
const bttnclickhandler=(e)=>{
/*
This is a `delegated` event handler
bound to the modal but operating
only on elements with a data-task
attribute.
*/
switch( e.target.dataset.task ){
case 'close': return closeclickhandler(e);
case 'prev': return previousclickhandler(e);
case 'next': return nextclickhandler(e);
}
};
/*
assign initial slide to the modal and
then set the index to the navigation
buttons.
*/
const slideclickhandler=(e)=>{
setcontent(e.target);
setindex(e.target.dataset.index);
setinitialstate(e.target.dataset.index,_CN);
};
const keyuphandler=(e)=>{
/* close modal if the user presses the ESC/Enter key */
if( e.keyCode == 27 || e.keyCode == 13 )closeclickhandler.call(this,e);
};
const setcontent=(item)=>{
let clone=item.cloneNode(true);
let div=d.createElement('div');
div.className=clone instanceof HTMLImageElement ? 'img_slides' : 'video_slides';
div.append( clone );
if( clone instanceof HTMLVideoElement ){
div.append( item.nextElementSibling.cloneNode( true ) );
clone.controls=true;
clone.muted=true;
}
receiver.innerHTML='';
receiver.appendChild( div );
setdisplay(div,'initial');
setdisplay(modal,'initial');
};
/*
Assign all the listeners
*/
col.forEach((n,i)=>{
n.dataset.index=i; // !!important!!
n.setAttribute( 'alt', n.src.split('/').pop() );
n.addEventListener('click',slideclickhandler);
});
modal.addEventListener('click',bttnclickhandler);
d.addEventListener('keyup',keyuphandler);
})();
* { box-sizing: border-box; }
html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: white;
font-size: 16px;
background-color: black;
}
#gallery {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#gallery img, video {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
}
.video_container {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 480px;
margin: 0;
padding: 0;
cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
filter: brightness(1);
}
.fa-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
cursor: pointer;
font-size: 2rem;
color: white;
}
#gallery img:hover, .video_container:hover {
transition: opacity 0.3s;
opacity: 0.8;
}
.fa-play:hover {
transition: color 0.5s;
color: #181818;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#my_modal {
animation-name: fadeIn;
animation-duration: 0.5s;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
.img_slides,
.video_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img_slides img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.video_slides video{
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
#close_button,
[data-task='close']{
cursor: pointer;
text-align: center;
font-size: 4rem;
width: 4rem;
position: absolute;
right: 0;
border-radius: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#previous,
[data-task='prev']{
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
left: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#next,
[data-task='next']{
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#close_button:hover,
[data-task='close']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
#previous:hover,
[data-task='prev']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
#next:hover,
[data-task='next']:hover{
transition: opacity 0.1s;
opacity: 0.5;
}
/* new */
.receiver{
display:flex;
flex-direction:column;
align-content:center;
align-items:center;
justify-content:center;
}
.receiver img,
.receiver video{
margin:auto
}
.red{
color:red;
}
[data-char]:after{
content:attr(data-char)
}
<div id='gallery'>
<img src='//i.imgur.com/gyVTo26.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/bEo04qh.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/iRENtzp.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/ElkQu54.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/Aj25iuv.jpg' alt='' tabindex='1' />
<div class='video_container'>
<video src='//i.imgur.com/kKGF9Az.mp4' tabindex='1' muted></video>
<i class='fas fa-play'></i>
</div>
<div class='video_container'>
<video src='//i.imgur.com/p7ohLnA.mp4' tabindex='1' muted></video>
<i class='fas fa-play'></i>
</div>
<img src='//i.imgur.com/PxWajo9.jpg' alt='' tabindex='1' />
<img src='//i.imgur.com/CAh7F8p.jpg' alt='' tabindex='1' />
</div>
<div id='my_modal'>
<div class='receiver'></div>
<span data-task='close' data-char='×' tabindex='0'></span>
<span data-task='prev' data-char='<' data-type='nav' tabindex='0'></span>
<span data-task='next' data-char='>' data-type='nav' tabindex='0'></span>
</div>
Update
Following from your comments regarding beginner status and still learning I worked a similar solution to that I proposed before but without the cloneNode approach and without modifying your HTML structure at all (apart from removing the scheme from image/video urls )
"use strict";
let index;
const d=document;
const body=d.body;
const q=(e,n=d)=>n.querySelector(e);
const qa=(e,n=d)=>n.querySelectorAll(e);
let modal=q('#my_modal');
let gallery=q('#gallery');
let bttns=qa('span',modal);
let videos=qa('video');
let collection=qa('[tabindex="1"]',gallery);
let items=qa('div[ class$="_slides" ]',modal);
let _length=items.length - 1;
const setdisplay=(nodes,style)=>{
if( nodes instanceof Array || nodes instanceof NodeList )nodes.forEach(n=>n.style.display=style);
else if( nodes instanceof HTMLElement )nodes.style.display=style;
};
const setoverflow=(n,value)=>n.style.overflow=value;
const setattribs=(col,attr,value)=>col.forEach(n=>n.setAttribute(attr,value));
const pausevideos=(col)=>col.forEach(n=>n.pause());
const removetabs=(col)=>col.forEach(n=>n.removeAttribute('tabindex'));
const setindices=(col,i)=>col.forEach(n=>n.dataset.index=i);
const closeModal = e => {
if ( e.target == q('#close_button') || e.keyCode==27 || e.keyCode==13 ) {
setoverflow(body,'initial')
setdisplay(modal,'none');
setdisplay(items,'none');
setattribs(collection,'tabindex',1);
pausevideos(videos);
}
};
const bttnclickhandler=(e)=>{
switch(e.target.id){
case 'previous':
if( index > 0 )index--;
break;
case 'next':
if( index < _length )index++;
break;
}
setindices(bttns,index);
setdisplay(items,'none');
setdisplay(items[index],'initial');
return true;
}
// set the dataset attribute on all items within modal & gallery
qa('#gallery > *').forEach((n,i)=>n.dataset.index=i);
qa('#my_modal > *').forEach((n,i)=>n.dataset.index=i);
// assign event listener to each item in the gallery which displays
// that item & sets the global index.
qa('img,div',gallery).forEach( n=>n.addEventListener('click',function(e){
// Find which index the clicked item has and set the global index variable
index=Number( this.dataset.index );
// Find the respective item from the modal collection of nodes
let item=items[index];
// set properties
setdisplay(modal,'initial');
setdisplay(item,'initial');
setindices(bttns,index);
removetabs(collection);
}));
bttns.forEach(bttn=>bttn.addEventListener('click',e=>{
switch( e.target.id ){
case 'close_button':return closeModal(e);
default: return bttnclickhandler(e);
}
}));
d.addEventListener( 'keyup', closeModal );
* { box-sizing: border-box; }
html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: white;
font-size: 16px;
background-color: black;
}
#gallery {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#gallery img, video {
width: 100%;
max-width: 360px;
height: 480px;
object-fit: cover;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
}
.video_container {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 480px;
margin: 0;
padding: 0;
cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
filter: brightness(1);
}
.fa-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
cursor: pointer;
font-size: 2rem;
color: white;
}
#gallery img:hover, .video_container:hover {
transition: opacity 0.3s;
opacity: 0.8;
}
.fa-play:hover {
transition: color 0.5s;
color: #181818;
}
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
#my_modal {
animation-name: fadeIn;
animation-duration: 0.5s;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
overflow: auto;
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
.img_slides, .video_slides {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.img_slides img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.video_slides video{
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
#close_button {
cursor: pointer;
text-align: center;
font-size: 4rem;
width: 4rem;
position: absolute;
right: 0;
border-radius: 16px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#previous {
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
left: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#next {
cursor: pointer;
text-align: center;
font-size: 3rem;
width: 4rem;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#close_button:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
#previous:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
#next:hover {
transition: opacity 0.1s;
opacity: 0.5;
}
<div id="gallery">
<img src="//i.imgur.com/gyVTo26.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/bEo04qh.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/iRENtzp.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/ElkQu54.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/Aj25iuv.jpg" alt="" tabindex="1">
<div class="video_container">
<video src="//i.imgur.com/kKGF9Az.mp4" tabindex="1" muted></video>
<i class="fas fa-play"></i>
</div>
<div class="video_container">
<video src="//i.imgur.com/p7ohLnA.mp4" tabindex="1" muted></video>
<i class="fas fa-play"></i>
</div>
<img src="//i.imgur.com/PxWajo9.jpg" alt="" tabindex="1">
<img src="//i.imgur.com/CAh7F8p.jpg" alt="" tabindex="1">
</div>
<div id="my_modal">
<div class="img_slides">
<img src="//i.imgur.com/gyVTo26.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/bEo04qh.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/iRENtzp.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/ElkQu54.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/Aj25iuv.jpg" alt="">
</div>
<div class="video_slides">
<video src="//i.imgur.com/kKGF9Az.mp4" controls muted></video>
</div>
<div class="video_slides">
<video src="//i.imgur.com/p7ohLnA.mp4" controls muted></video>
</div>
<div class="img_slides">
<img src="//i.imgur.com/PxWajo9.jpg" alt="">
</div>
<div class="img_slides">
<img src="//i.imgur.com/CAh7F8p.jpg" alt="">
</div>
<span id="close_button" tabindex="0">×</span>
<span id="previous" tabindex="0"><</span>
<span id="next" tabindex="0">></span>
</div>
The idea remains the same in principal. Items within the gallery and items within the modal are assigned a data-index attribute when the page loads ( this could be done another way but this is, imo, easier & less cluttered )
The global index variable is changed according to whether the previous or next buttons is clicked and that new index value is used to select the item within the modal with that same data-index value. The buttons data-index attribute is changed to that new index value so that the next time a button is clicked the process can repeat. If the index is approaching the limits ( 0 or _length ) then the index remains unchanged so no error occurs trying to select an invalid index. Alternatively at that point the index could be reset to the opposite value perhaps so the process becomes cyclic - not tested though. Plus 1?

Related

Image slides that fades when navbar is hit

I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles
If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!
JAVASCRIPT:
<script>
var imgArray = [
'images/img1.gif',
'images/img2.gif',
'images/img3.jpg',
'images/img4.jpg'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function () {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
}, 500);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
}
</script>
HTML:
<img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">
<div id="navigation">
<label for="r1" class="bar" id="bar1"></label>
<label for="r2" class="bar" id="bar2"></label>
<label for="r3" class="bar" id="bar3"></label>
<label for="r4" class="bar" id="bar4"></label>
</div>
</div>
CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
color: #009cdc;
transition: all 0.3s ease 0s;
}
.nav_links li:hover a {
color: #2772ff;
}
#top-content {
display: block;
}
latest-nav li#latest-nav-1 {
background-color: #fa4842;
}
#latest-nav li.off {
border-top: 15px solid #fff;
}
#latest-nav li.off {
height: 5px;
opacity: 0.35;
}
#latest-nav li {
cursor: pointer;
float: left;
height: 5px;
transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
-webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
width: 16.6%;
}
.slidershow {
height: 400px;
overflow: hidden;
}
.middle {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
}
#navigation {
position: absolute;
bottom: 35px;
left: 60%;
transform: translateX(-50%);
display: flex;
}
.bar {
border-top: 15px solid #fff;
width: 200px;
opacity: 0.35;
height: 5px;
cursor: pointer;
transition: 0.4s;
}
.slides {
width: 500%;
height: 100%;
display: flex;
margin-top: 30px;
}
.slide {
width: 20%;
transition: 0.6s;
}
.slide img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
width: auto;
}
latest .container img {
display: block;
margin: auto;
max-height: 250px;
max-width: 600px;
}
#bar1 {
background-color: #3875fc;
}
#bar2 {
background-color: #ff8809;
}
#bar3 {
background-color: #19be29;
}
#bar4 {
background-color: #fa4842;
}
Thanks so much!

I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.
Basically what is going on is:
The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.
So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).
As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!
HTML:
<div class="wrapper">
<div class="slider">
<div class="slider-item slider-item--visible">
hello item 1
</div>
<div class="slider-item">
hello item 2
</div>
<div class="slider-item">
hello item 3
</div>
</div>
<nav class="navbar">
<span class="navbar-item navbar-item--selected" data-position="1"></span>
<span class="navbar-item" data-position="2"></span>
<span class="navbar-item" data-position="3"></span>
</nav>
</div>
CSS
.wrapper{
max-width: 1000px;
width: 100%;
margin: 0 auto;
display: block;
}
/* Slider */
.slider{
max-width: 100%;
width: 100%;
}
.slider-item{
display: none;
}
.slider-item--visible{
display: block;
}
/* Navbar */
.navbar{
max-width: 100%;
display: flex;
align-items: flex-end;
height: 8px;
}
.navbar-item{
max-width: 33.3%;
width: 100%;
display: block;
height: 5px;
cursor: pointer;
opacity: .5;
transition: all .32s ease;
}
.navbar-item--selected{
height: 8px;
opacity: 1;
}
/* Meaningless styles (colors) */
.navbar-item:nth-child(1){
background: salmon;
}
.navbar-item:nth-child(2){
background: lightblue;
}
.navbar-item:nth-child(3){
background: #19be29;
}
Javascript
const $navbars = document.querySelectorAll(`.navbar-item`);
function removeSelected(){
const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
if (!$selected){
return;
}
for (let each of $selected){
each.classList.remove("navbar-item--selected");
each.classList.remove("slider-item--visible");
}
}
for (let each of $navbars){
each.addEventListener("mouseover", function(){
removeSelected();
const position = each.getAttribute("data-position");
const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
each.classList.add("navbar-item--selected")
$item.classList.add("slider-item--visible");
});
}

How to make element on top on hover (after transition)

i have a problem for css guru I'm not able to untangle.
This is the html:
<div class="container">
<div class="around">
<img class="depiction around-depiction"/>
<div class="label">A label</div>
</div>
<div class="around">
<img class="depiction around-depiction" />
<div class="label">Another label</div>
</div>
...
<div class="center">
<img class="depiction center-depiction" />
<div class="label">Center label</div>
</div>
</div>
I've applied a transform to .around element to move in a circle around the .center element.
I cannot manage to do two thing :
When i hover over an image the image and its label should go above everything (i put a z-index: 10000 but that doesn't work
Make the .around image above the .around label. You can see by figure two that hover doesn't work on label div.
This is the css:
.container .circle {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin: calc(-100px / 2);
border-radius: 50%;
}
.center {
border-radius: 50%;
z-index: 1;
position: absolute;
}
.depiction {
border-radius: 50%;
cursor: pointer;
transition: 0.2s;
}
.around-depiction:hover {
transform: scale(4);
z-index: 1000000;
}
.center-depiction:hover {
transform: scale(2);
z-index: 1000000;
}
.label {
opacity: 0;
min-width: 200px;
z-index: -2;
background: white;
border-radius: 10px/20px;
padding: 5px;
border: 1px solid black;
}
.center:hover .label,
.around:hover .label {
opacity: 1;
z-index: 5;
}
.center .label:hover,
.around .label:hover {
opacity: 0;
}

Try adding the z-index with position: relative; on your image/label.
z-index doesn't work on the default, which is position: static;
https://coder-coder.com/z-index-isnt-working/

Load/replace an img or video specified in a data-src

My aim is to display a different image or video displayed within a div, which changes when other elements are hovered over.
I think I have this working with just an image by checking what image file is specified in a data-src and loading that into an img tag on the page. However I need to change the markup from img to video when a movie file is specifed - that's what I need help with.
You can see the 'working' image version here (not the 3rd item has a placeholder video in the data-src so won't show):
https://codepen.io/moy/pen/BaNxzdL
So currently on the page I have this empty image tag:
<div class="carousel__bg">
<img src="" />
</div>
Image files are specified on multiple carousel items in a data-src like the example below:
<div class="carousel__item" data-src="img/content/1-wide.jpg">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2>
Read the Article
</div>
<img src="img/content/1.jpg" class="carousel__image" />
</div>
And the javascript that gets the image URL and adds it to the page is this:
$(function() {
var overlay = $('.carousel__bg img'), cached = {};
$('.carousel__item').mouseenter(function() {
var item = $(this),
spot = $(this).index('.carousel__item'),
value = item.attr('data-src');
overlay.fadeTo(0,0).attr('src', value);
if (!overlay[0].complete && !cached[spot]) {
cached[spot] = true;
$('.carousel__bg').addClass('loading');
overlay.one('load', function() {
$('.carousel__bg').removeClass('loading');
overlay.fadeTo(300,1);
});
}
else overlay.fadeTo(300,1);
})
.mouseleave(function() {
overlay.finish();
});
});
Obviously the problem is if I specify data-src="video/safari.mp4" it isn't going to work as it's currently trying to add the video into an img element. So how would I go about switching between img/video tags? A related issue would be to be able to load both an mp4 + webm/ogg versions of the file?
So would it need to be reworked to 'inject' an img or video element onto the page depending on the extension? I tried using an if/else statement to check if the data-src contained the .mp4 extension and just hardcoded a video element on the page to text but couldn't get that to work. :/
These files can be quite large which is why I'm not loading them until they're needed.
Edit
As a bit of an aside, I decided to put these items in a carousel to see if this effect would work - and it pretty much does!
However, I noticed the way that I fade out the images in the CSS (fade all of them out when the .carousel is hovered but then target the individual item and overwrite) is now a problem when you hover over the prev/next buttons as the images don't fade back in.
Anyone got a better way of handling this? I tried a 100% CSS method but maybe added a class would be better?
Slick carousel example: https://codepen.io/moy/pen/JjdvRyG

The video element part is not two hard, the important part is getting the mime type of the video to add to the source element.
The data-src takes an array of video urls (of different types) and adds the different sources to the element after finding the type.
I updated your codepen
As for the buttons, they are inside the .carousel element so the will bubble the hover to all the elements styled based on that. I made some elements more specific so they will only change style when the list of items is hovered.
Finally, in order for the listeners to apply to the slick element, I changed them to .on.
var VIDEO_TYPES = {
'mp4': 'video/mp4',
'webm': 'video/webm',
'ogv': 'video/ogg',
}
/**
* Slick
*/
$(document).ready(function() {
$('.slick-carousel').slick({
//centerMode: true,
centerPadding: '0',
slidesToShow: 3,
arrows: true,
dots: false,
prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>←</span></a>',
nextArrow: '<a class="slick-arrow slick-arrow--next"><span>→</span></a>',
responsive: [{
breakpoint: 960,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 600,
settings: {
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerMode: true,
slidesToShow: 1
}
}
]
})
.on('setPosition', function(event, slick) {
slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');
});
/**
* Image Swap
*/
var cached = {};
var overlay_video = $(".carousel__bg video");
var overlay_img = $(".carousel__bg img");
var overlay = $(".carousel__bg");
$(".carousel__item")
.on('mouseenter', function() {
var item = $(this),
spot = $(this).index(".carousel__item"),
value = item.data("src");
overlay_video.empty();
var overlay_item;
overlay.fadeTo(0, 0);
//videos will have an array ur urls
var is_video = value instanceof Array;
if(is_video) {
overlay_item = overlay_video;
overlay_img.attr("src", '');
overlay_video.append(value.map((url) => {
var extension = url.split('.').pop();
var type = VIDEO_TYPES[extension];
return `<source src="${url}" type="${type}">`
}));
} else {
overlay_item = overlay_img;
overlay_img.attr("src", value);
}
//force the video element to reload
overlay_video.get(0).load();
if (!overlay_item.complete && !cached[spot]) {
cached[spot] = true;
overlay.addClass("loading");
overlay_item.one(is_video ? "loadeddata" : "load", function() {
overlay.removeClass("loading");
overlay.fadeTo(300, 1);
});
} else overlay.fadeTo(300, 1);
})
.on('mouseleave', function() {
overlay.finish();
});
});
/**
* Base styling.
*/
html {
background: rgb(255,255,255);
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
}
body {
background-color: transparent;
color: rgb(0,0,0);
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-family: 'Roboto', sans-serif;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6rem;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
/**
* Carousel
*/
.carousel {
background: rgb(0,0,0);
color: rgb(255,255,255);
height: 640px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel:before,
.carousel:after {
background: rgba(255,255,255,.25);
content: "";
height: 100%;
position: absolute;
top: 0;
left: 33.33333%;
width: 1px;
z-index: 30;
}
.carousel:after {
left: 66.66666%;
}
/**
* Background (fullwidth) image
*/
.carousel__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg.loading {
background: url(../img/interface/loading.gif) no-repeat center center;
}
.carousel__bg img, .carousel__bg video {
display: block;
height: 640px;
object-fit: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
/**
* Individual carousel item
*/
.carousel__item {
box-sizing: border-box;
float: left;
height: 640px;
position: relative;
width: 33.33333%;
}
.carousel__item:hover {
cursor: pointer;
}
/* Text Content */
.carousel__content {
background: rgba(0,0,0,.45);
box-sizing: border-box;
color: rgb(255,255,255);
height: 100%;
min-height: 100%;
padding: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 15;
}
.carousel__title,
.carousel__subtitle,
.carousel__flag {
color: rgb(255,255,255);
letter-spacing: 1px;
font-family: 'Anton', sans-serif;
font-weight: 400;
line-height: 1;
margin: 0 0 5px;
padding: 0;
text-transform: uppercase;
}
.carousel__title {
font-size: 20px;
transition: all .25s;
}
.carousel__subtitle {
display: none;
font-size: 48px;
}
.carousel__flag {
color: rgb(45,190,193);
font-size: 14px;
}
/* Button */
.carousel__btn {
background: transparent;
border: 1px solid rgb(255,255,255);
box-sizing: border-box;
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 12px;
font-weight: 400;
height: 45px;
line-height: 45px;
letter-spacing: 1px;
opacity: 0;
position: absolute;
padding: 0 30px;
bottom: 30px;
left: 30px;
right: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .15s;
-webkit-backface-visibility: hidden;
}
.carousel__btn:visited {
background: transparent;
}
.carousel__btn:focus,
.carousel__btn:hover {
background: rgb(45,190,193);
border-color: rgb(45,190,193);
}
/* Image */
.carousel__image {
display: block;
height: 100%;
opacity: 1;
object-fit: cover;
transition: all .30s;
position: relative;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
/* When hovering over the carousel, fade all the titles out */
.carousel>.slick-carousel>.slick-list:hover .carousel__title {
opacity: .30;
}
/* But not the one contained without the 'item' you're hovering over */
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
/* Fade all images out so the fullwidth background image is visble */
.carousel>.slick-carousel>.slick-list:hover .carousel__image {
opacity: 0;
}
/* Hide the flag element */
.carousel>.slick-carousel>.slick-list:hover .carousel__flag {
display: none;
}
/* Show the subtitle */
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
/* Display the CTA of the active item */
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
/* Slick Prev/Next */
.slick-carousel,
.slick-list,
.slick-track {
height: 100%;
min-height: 100%;
}
.slick-arrow {
background: transparent;
border: 1px solid rgb(255,255,255);
color: rgb(255,255,255);
display: block;
font-family: 'Anton', sans-serif;
font-size: 24px;
height: 45px;
line-height: 45px;
margin-top: -30px;
overflow: hidden;
position: absolute;
top: 50%;
left: 30px;
text-align: center;
transform: rotate(45deg);
transition: all .15s;
width: 45px;
z-index: 60;
}
.slick-arrow:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.slick-arrow span {
display: block;
transform: rotate(-45deg);
}
.slick-arrow--next {
left: auto;
right: 30px;
}
/* Slick Core */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="" />
<video autoplay muted loop></video>
</div>
<div class="slick-carousel">
<div class="carousel__item" data-src="https://www.fillmurray.com/750/550">
<div class="carousel__content">
<h4 class="carousel__title">Behind The Scenes</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Read the Article
</div>
<img src="https://www.fillmurray.com/g/400/600" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://www.fillmurray.com/800/600">
<div class="carousel__content">
<h4 class="carousel__title">Reed Stark</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
Watch the Video
</div>
<img src="https://www.fillmurray.com/g/450/650" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/350/550" class="carousel__image" />
</div>
<div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>
<div class="carousel__content">
<h4 class="carousel__title">Fresh Drops</h4>
<span class="carousel__flag">// Featured</span>
<h2 class="carousel__subtitle">Lorem ipsum dolor</h2>
See The Collection
</div>
<img src="https://www.fillmurray.com/g/300/500" class="carousel__image" />
</div>
</div>
</div>

addEventListener adds incorrect properties on click - only on 320x480

TL DR it should be display: flex; opacity: 1
I have a menu which works in the following way:
On mouseenter or click, the menu is shown (display: flex, opacity: 1)
On mouseleave or click (outside the menu area) the menu is hidden (display: none, opacity: 0)
The problem occures when I try to "open" the menu in the Dev. Tools on 320x480 resolution.
When I click on the menu area, only #envelope does the transformation. #links (should also transform but don't becouse of the following reasons) which should get display: flex actually gets display: none assigned to it.
Note: It's working in full screen. Something is bothering him with the 320x480 res.
If I can elaborate or provide any additional information, let me know.
Thank you
function hide (){
document.getElementById("links").style.display = "none";
};
function show (){
document.getElementById("links").style.display = "flex";
document.getElementById("links").style.opacity = "1";
};
var menu = document.getElementById("menu");
menu.addEventListener("mouseenter", show);
menu.addEventListener("mouseleave", hide);
menu.addEventListener("click", show);
document.addEventListener("click", function (){
if (this != menu){
document.getElementById("links").style.display="none";
}
});
#menu{
height: 10vh;
background-color: red;
text-align: center;
transition: all 1s ease-out;
padding-top: 5vh;
}
#menu:hover{
color: red;
}
#envelope{
height: 0;
display: block;
background-color: blue;
min-width: 100%;
z-index: 1;
position: absolute;
left: 0;
content: "";
opacity: 0;
transition: all 1.3s ease-out;
}
#links{
height: 0;
display: none;
background-color: pink;
justify-content: center;
z-index: 2;
min-width: 100%;
opacity: 0;
transition: all 1s ease-in;
}
#google{
margin-top: -1vh;
width: 150px;
}
#mysite{
padding-left: 5%;
margin-top: -1vh;
width: 150px;
}
#menu:hover #envelope{
height: 100px;
opacity: 1;
}
#menu:focus #envelope{
height: 100px;
opacity: 1;
}
#menu:hover #links{
opacity: 1;
height: 300px;
}
#menu:focus #links{
opacity: 1;
height: 300px;
}
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div style="width: 20%;"></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>
</div>

Don't use transition: all because the browser then need to loop through all properties, and it might cause lag.
Don't use position: absolute unless you have to.
I removed #envelope and inserted the "Click here ..." text in a label (explanation why below).
I arranged classes so I didn't have to repeat code.
Pure CSS solution below.
I made a little CSS hack, where I used a label and a checkbox to simulate a click. So when clicking on the label#menu-toggler, the (hidden) checkbox is checked, which triggers #menu-toggler:checked ~ #links.invisible. I had to add another class to #links, otherwise the low specificity wouldn't trigger the change.
html, body { /* new */
margin: 0px;
padding: 0px;
}
#menu {
height: 15vh; /* changed */
background-color: red;
text-align: center;
margin: 0.5rem; /* new */
}
#menu > input#menu-toggler { /* new */
display: none;
}
#menu > .tagline { /* new */
display: block; /* to get padding to work */
padding: 5vh 0px;
transition: opacity 1s;
}
#menu:hover > .tagline { /* new */
opacity: 0;
}
#menu > .tagline, /* new */
#menu > #links /* new */
{
transition-timing-function: ease-out;
}
#menu > #links {
display: flex;
justify-content: space-around; /* changed */
position: relative; /* changed */
left: -0.5rem; /* changed */
top: -5vh; /* changed */
opacity: 0;
height: 0;
width: 100vw; /* changed */
z-index: 1;
overflow: hidden; /* new */
background-color: pink;
transition-property: height, opacity;
transition-duration: 1.3s;
}
#menu:hover #links,
#menu-toggler:checked ~ #links.invisible { /* new */
height: 150px !important; /* changed */
opacity: 1 !important;
}
#links #google,
#links #mysite
{
width: 150px;
}
<div id="menu">
<input id="menu-toggler" type="checkbox" />
<label for="menu-toggler" class="tagline">Click here to browse the internet.</label>
<div id="links" class="invisible">
<div><img id="google" src="https://seomofo.com/wp-content/uploads/2010/05/google_logo_new.png" /></div>
<div><img id="mysite" src="https://toppng.com/uploads/preview/wwf-logo-horizontal-world-wildlife-foundation-logo-shirt-11563219164hg5hfcveei.png"/></div>
</div>
</div>

Css z-index and transform weird flash

Click on the image in snippet (expand full page) to run transform and look more closely at bottom right corner when animated card goes behind, you will see it overlaps slightly when it shouldn't. I happens when I apply z-index on each box div in CSS. If I remove z-index, there is no flash, but I need z-indexes on my box divs. Otherwise I cant have stack behave in such when I shuffle them (unless I change DOM order which I don't want). I have tried with some backface-visibility in CSS but with no luck. How could I get rid of such flash?
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.css("zIndex", -1).one("transitionend", function() {
}).removeClass('t').addClass('t2')
}).addClass('t')
})
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
Happens in all browsers from what I can see.

The fix is actually simple - just add transition-property: transform because that is what you want to transform (transition-property: all is the default and z-index is also transitioned).
See demo below:
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.css("zIndex", -1).removeClass('t').addClass('t2')
}).addClass('t')
});
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
transition-property: transform; /* added */
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
Why the flicker?
Note that z-index is an integer and it doesn't make much sense to transition it - the animation type is integer according to MDN:
When animated, values of the data type are interpolated
using discrete, whole steps. The calculation is done as if they were
real, floating-point numbers; the discrete value is obtained using the
floor function. The speed of the interpolation is determined by the
timing function associated with the animation.
See a sample of how you can animate z-index:
div {
position: absolute;
border: 1px solid;
}
.container div {
width: 100px;
height: 100px;
}
.container .box {
background-color: cadetblue;
z-index: 1;
animation: stack 5s infinite linear;
}
.box + div {
top: 10px;
left: 10px;
z-index: 1;
background-color: lightblue;
}
.box + div + div {
top: 20px;
left: 20px;
z-index: 2;
background-color: aliceblue;
}
#keyframes stack {
50% {
z-index: 3;
}
}
<div class="container">
<div class="box"></div>
<div></div>
<div></div>
</div>
This is why you have the flicker in your animation.

I think it is merely an order problem.
Just place the .css (" zIndex ", -1) next to the .addClass ('t'):
this way flash doesn't happen since z-index is applyed before the backward translation
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.removeClass('t').addClass('t2')
}).css("zIndex", -1).addClass('t')
})

I just update your code with jQuery update. Actually i just move your box.css("zIndex", -1).addClass('t'); script in setTimeout method. Try this I hove it'll resolve your issue. Thanks
$('body').on('click', function() {
var box = $('#a2')
box.one("transitionend", function() {
box.one("transitionend").addClass('t2');
})
setTimeout(function(){
box.css("zIndex", -1).addClass('t');
})
})
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

I tried increasing the z-index of the succeeding image and it works.
$('body').on('click', function() {
var box = $('#a2')
var i=0;
box.one("transitionend", function() {
// increase the z-index
$("#a1").css("zIndex", 99);
box.css("zIndex", -1).one("transitionend", function() {
}).removeClass('t').addClass('t2')
}).addClass('t')
})
.box {
position: absolute;
width: 250px;
padding: 10px;
background: #fff;
box-shadow: 1px 1px 5px #484848;
left: 0;
top: 0;
height: 370px;
box-sizing: content-box;
transition-duration: 0.5s;
transition-timing-function: ease;
backface-visibility: hidden;
}
.box img {
display: block;
position: relative;
backface-visibility: hidden;
user-select: none;
}
#a1 {
z-index: 0;
transform: rotate(-4.5884deg);
}
#a2 {
z-index: 1;
transform: rotate(7deg);
}
.t {
transform: translateX(370px) rotate(23deg) !important;
}
.t2 {
transform: translateX(0) rotate(-7deg) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
<img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>
<div class="box" id="a2">
<img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

Categories