Develop Reference

How do I index unhidden element on top, instead of whatever is next in the DOM?

I am trying to code a card drawing emulation and I have run into a problem. After I've flipped a random card I cannot get that exact card to stay on top - instead whatever is furthest down in the DOM stays on top, and the other cards just falls below it.
I have tried with Z-index (which did nothing), and I believe this might be the answer, but I think I'm overseeing something. Also tried to hide the element with a timer, which still causes overlapping issues.
Anyone who could point me in the direction of how to make the pulled card stay on top regardless of it's placement within the DOM? I've even tried to give DOM element further up higher z-index which does nothing to the order. So I have a hard time finding the problem!
JSFiddle
Full code:
// Functions for displaying the random content when card is clicked
var backgroundImage = document.getElementById("bg");
function first_function(){
console.log("test1");
document.getElementById("a").classList.remove("hide");
document.getElementById("a2").classList.remove("hide");
document.getElementById("a").style.color = "white";
}
function second_function(){
console.log("test2");
document.getElementById("b").classList.remove("hide");
document.getElementById("b2").classList.remove("hide");
document.getElementById("b").style.color = "white";
}
function third_function(){
console.log("test3");
document.getElementById("c").classList.remove("hide");
document.getElementById("c2").classList.remove("hide");
document.getElementById("c").style.color = "white";
}
function last_card(){
console.log("last one");
document.getElementById("last").classList.remove("hide");
document.getElementById("last2").classList.remove("hide");
document.getElementById("last").style.color = "white";
}
// Splice array 1 item at a time
Array.prototype.randsplice = function () {
var randomnbr = Math.floor(Math.random() * this.length);
// Removed extra variable
return this.splice(randomnbr, 1);
};
// Use an eventlistener to wait for the DOM to load so that we can depend on DOM elements being available
window.addEventListener("load",function(){
// Setup the array we will use for this example
var my_array = [
first_function,
second_function,
third_function,
];
// Attach a click event handler to our button
backgroundImage.onclick = function(){
// Hide content after each click
var list = document.getElementsByClassName("hide-all");
for(var i=0;i<list.length;i++){
list[i].classList.add("hide");
}
// Modify my_array and display result
if(my_array.length > 0){
var new_numb = my_array.randsplice();
new_numb[0].apply(null);
// Animation making card unclickable until animation is complete
backgroundImage.classList.add("animstart");
backgroundImage.addEventListener( "animationend", function() {
backgroundImage.classList.remove("animstart");
} );
// Check if the array is empty and if so, perhaps display a message
}else{
last_card();
backgroundImage.classList.add("no-click");
}
}
});
body, html{
height: 100%;
margin: 0;
background-color: #333;
}
/* Background card */
.bgcard{
width:9.4vw;
display: inline-block;
position:absolute;
left:35.4%;
top:66.2%;
cursor: pointer;
}
/* Animation making card unclickable start */
.animstart{
animation-name: examples;
animation-duration: 1s;
}
#keyframes examples {
0% { pointer-events: none;}
100% { pointer-events: none;}
}
.cards{
z-index: 100;
transform: rotateY(180deg);
width: 14vw;
font-size: 1.2vw;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flip;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes flip {
from { transform: rotateY(180deg); left: -10vw; }
to { transform: rotateY(0deg); left: 0vw; }
}
#keyframes flips {
from { transform: rotateY(0deg); left: -10vw; }
to { transform: rotateY(180deg); left: 0vw; }
}
.frontcard {
width: 14vw;
z-index: 200;
transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
animation-name: flips;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.frontcard, .back {
backface-visibility: hidden;
position: absolute;
}
.text-wrap{
padding-left: 200px;
width: 50vw;
position: absolute;
}
p{
top: 10%;
animation-name: hidden;
animation-duration: 0.6s;
}
h2{
top: 5%;
animation-name: hidden;
animation-duration: 0.6s;
}
.pulled-card-container{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
z-index: 100;
perspective: 1000;
}
.pulled-card-container-done{
position: absolute;
right: 24%;
top:66.2%;;
display: inline-block;
}
#keyframes example {
0% { left:-10vw;}
25% { left:0px;}
50% { left:0px;}
75% { left:0px;}
100% { left:0px;}
}
#keyframes hidden {
0% {opacity: 0;}
25% {opacity: 0;}
50% {opacity: 0;}
75% {opacity: 0;}
100% {opacity: 1;}
}
.no-click{
pointer-events: none;
cursor: none;
}
.hide{
display: none;
}
.hideanim{
opacity: 1;
-webkit-animation-delay: 1s;
-webkit-animation-name: fadein;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
animation-name: fadein;
animation-duration: 1s;
animation-timing-function: linear;
}
#-webkit-keyframes fadein {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadein {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="all-wrap">
<!-- Containers with information -->
<div id="a" class="aa hide ">
<div id="a2" class="text-wrap hide hide-all">
<h2>X of Cards</h2>
<p>First Displayed Text</p>
</div>
<div class="pulled-card-container">
<img class="cards lol1"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/924/2D__57497.1440113502.1280.1280.png?c=2" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<div id="b" class="ab hide">
<div id="b2" class="text-wrap hide hide-all">
<h2>Y of Cards</h2>
<p>Second displayed text</p>
</div>
<div class="pulled-card-container">
<img class="cards lol2"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/928/6D__92916.1440113530.1280.1280.png?c=2" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<div id="c" class="ac hide">
<div id="c2" class="text-wrap hide hide-all">
<h2>Z of Cards</h2>
<p>Third displayed text</p>
</div>
<div class="pulled-card-container">
<img class="cards lol3"src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<div id="last" class="hide">
<div id="last2" class="text-wrap hide hide-all">
<h2>Last of Cards</h2>
<p>The last card in the deck</p>
</div>
<div class="pulled-card-container">
<img class="cards" src="https://cdn2.bigcommerce.com/n-d57o0b/1kujmu/products/297/images/932/10H__11470.1440113568.1280.1280.png?c=2" alt="" width="200px" height="300px">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px" alt="" class="frontcard">
</div>
</div>
<!-- Background card -->
<div class="bgcard" id="bg">
<img src="https://st.depositphotos.com/1363007/1810/i/950/depositphotos_18105995-stock-photo-card-back.jpg" alt="" width="200px" height="300px">
</div>
</div>
Any help is greatly appreciated!

When using z-index, you will need to set the position to relative or absolute ... pretty sure, like 90% sure.

After fidgeting around some more I found my grave error. Here's the answer, in case anyone ever wonders:
I had z-index on pulled-card-container that conflicted. After removing that, and doing a
var zNumb = 300;
zNumb++;
document.getElementById("imgOne").style.zIndex = zNumb;
on each function it worked like a charm!

Trying to make different hover animations for multiple images in css

So i have a few images in HTML like this
<div class="thumb">
<img src="image1.jpg" alt="name1">
<img src="image2.jpg" alt="name2">
<img src="image3.jpg" alt="name3">
</div>
I'm trying to make them have a specific hover effect - when you hover on image1, image1 gets bigger and image2 and image3 get smaller and with reduced opacity. This is an example with only three images but in reality i have varying number of images on different pages.
I tried this in CSS but it doesn't seem to work properly. The problem is the first effect is triggered whenever the mouse is above .thumb and not above an image, but i haven't found a way to adress all images other than the one which is being hovered.
.thumb:hover img {
opacity: .25;
transform: scale(.8);
}
.thumb img:hover {
opacity: 1;
transform: scale(1.2);
}
I prefer to have it in CSS but if it requires javascript it's ok. Any help will be appreciated.

Maybe you are after sibling selector:
.thumb{
display: inline-block;
}
.thumb:hover img{
opacity: .25;
transform: scale(.8);
transition: opacity 1s, transform 1s;
}
.thumb a:hover img{
opacity: 1;
transform: scale(1.2);
}
<div class="thumb">
<img src="http://placehold.it/100x100/6666ff" alt="name1">
<img src="http://placehold.it/100x100/ff6666" alt="name2">
<img src="http://placehold.it/100x100/66ff66" alt="name3">
</div>
UPDATE
If you are after a JS solution it would be something like this:
$('.thumb a').hover(function(){
$(this).siblings().addClass('shrink').removeClass('grow');
$(this).addClass('grow').removeClass('shrink');
}, function(){
$(this).siblings().removeClass('shrink');
$(this).removeClass('grow');
});
.thumb a{
margin: 20px;
}
.thumb a.shrink img{
opacity: .25;
transform: scale(.8);
transition: opacity 1s, transform 1s;
}
.thumb a.grow img{
opacity: 1;
transform: scale(1.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="thumb">
<img src="http://placehold.it/100x100/6666ff" alt="name1">
<img src="http://placehold.it/100x100/ff6666" alt="name2">
<img src="http://placehold.it/100x100/66ff66" alt="name3">
</div>

This can now be done directly with css using ::has pseudo class: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
(Currently only available in safari, with other browsers' support rolling out)

have you tried to add particular classes for different type of hover that you want and add them in the img tags that you like?
.thumb img.opacity-1:hover {
opacity: 1;
transform: scale(1.2);
}
.thumb img.opacity-05:hover {
opacity: 0.5;
transform: scale(1.2);
}

This will work for you.
.thumb img {
opacity: 0.25;
transform: scale(0.8);
}
.thumb img:hover {
opacity: 1;
transform: scale(1.2);
}

Navigate through various child divs

Basically I am working on website similar to http://keepearthquakesweird.com/.
I am not good in jQuery except the basic stuff but have created the layout in html5 and css3. The problem I am having is if you see on the website after clicking the enter link it takes you to a grid.I have created exact grid and able to pull up various div content when user clicks on various links by the following approach (you can see my code below) using css3 + jquery. So the question is that is there a better approach for pulling up the divs when user click on the link. the main question is I need the next previous button as in the website mentioned when you click any alphabet, so you can navigate through the description divs.
Looking for some honest advice and solution :)
$('a#alpha').click(function(e) {
e.preventDefault();
var id = $(this).attr('data-id');
$("#container > div").each(function() {
if ($(this).attr('data-id') == id) {
$(this).toggleClass('show-content');
}
});
});
$("a#cls").click(function() {
$("#container > div").each(function() {
if ($(this).hasClass('show-content')) {
$(this).removeClass('show-content');
}
})
})
#container div {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
transform: translateY(100%);
-webkit-transform: -webkit-translateY(100%);
-moz-transform: -moz-translateY(100%);
-o-transform: -o-translateY(100%);
transition: .4s ease-in all;
-webkit-transition: .4s ease-in all;
-moz-transition: .4s ease-in all;
z-index: 6;
opacity: 1;
}
.closeBtn {
position: fixed;
top: 20px;
right: 20px;
font-size: 30px;
color: #fff;
}
#content-1 {
background: #333;
}
#content-2 {
background: #ff0;
}
#content-3 {
background: #f00;
}
.show-content {
opacity: 1 !important;
z-index: 5 !important;
transform: translateY(0%) !important;
-webkit-transform: -webkit-translateY(0%) !important;
-moz-transform: -moz-translateY(0%) !important;
-o-transform: -o-translateY(0%) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Link to pull div
</li>
<li>
Link to pull div
</li>
<li>
Link to pull div
</li>
</ul>
<div id="container">
<div id="content-1" data-id="01">
X
<h1>TITLE</h1>
</div>
<div id="content-2" data-id="02">
X
<h1>TITLE</h1>
</div>
<div id="content-3" data-id="03">
X
<h1>TITLE</h1>
</div>
</div>

how to get flip with css3 and change the element?

my context
HTML
<div class="cart">
<div class="black"></div>
</div>
JS
var whiteEl="<div class="white"></div>";
//I would like to replace black with white, flip animation.
$(".cart").empty().append(whiteEl);
whiteEl.addClass("flipanim");
css
#-webkit-keyframes flip{
from{
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
/*
similar cross browser code*/
.flipanim{
-webkit-animation: flip 1s 1;
-moz-animation:flip 1s 1;
-o-animation:flip 1s 1;
animation:flip 1s 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
I am using key frame animation for show transform animation.
and in javascript adding class to attached element.
my animation not working.
How can I add the new element with flip animation to ".cart"?

try this
$(".cart").html('').append(whiteEl);
//since you have already appended the created div here.. you can use class selctor.
$('.white').addClass("flipanim");

You don't need to remove any content for that and also don't need Javascript for it:
html-markup:
<div class="container">
<div class="cart">
<div class="black">Black side</div>
<div class="white">White side</div>
</div>
</div>
css:
.cart div {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
.cart .black {
background:#111;
color:white;
}
.cart .white {
-webkit-transform: rotateY(180deg);
color: black;
background: #eee;
}
Now you can apply your effects simply with:
.container:hover .cart {
-webkit-transform: rotateY(180deg);
}
See the Demo

helping in transition effect by CSS3 or JS or jquery

I want to change the background-image of this picture while moving to another one on my images folder
like this example
that's my code
CSS
.image {
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
.image:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
HTML
<div id="image_holder_1" class="image_holder">
<img id="image_1" class="image" src="images/esu.gif" />
</div>

jQuery.cycle is your answer.
<script type="text/javascript">
$(document).ready(function() {
$('.image_holder').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
You should remove the "image" id and image elements should be contained inside your "image_holder" that contain links to the images you want to cycle (transition) through. Your html will then look something like this:
<div id="image_holder_1" class="image_holder">
<img src="images/esu.gif"/>
<!-- Your other image source(s) goes here -->
</div>
If your image transition worked the way that you liked with your css, use the css for the transition and omit the transition type in the jQuery. Here is a link to the different transitions that may be useful to you by using jQuery.cycle. jQuery.cycle transitions

The effect in your example would not be achievable in CSS, transition animations cannot be cancelled, so each animation would have to complete for both the mouse over and mouse out events in the CSS.