I want to use this css loader before full load site.
CSS loader source: http://tobiasahlin.com/spinkit.
On this site no documents or help.
How to use this HTML code in my website?
HTML:
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
CSS:
.sk-cube-grid {
width: 40px;
height: 40px;
margin: 100px auto;
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: #333;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
#-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
#keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
After refresh page, not work this code...
Add the css inline in the head of the document. Then you can either add your css under it or in the footer before the closing body tag (isn't proper HTML but it works fine).
Add a css class for a preloader div and have it position fixed, top, right, bottom, left all as 0 and a high z-index. Place the HTML for the preloader in that div.
Then add your ja files after the css if they r in the footer otherwise add them before the closing body tag anyway.
And then you want some jquery or JavaScript to display none the containing div from above.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
HEAD STUFF
<style>
.sk-cube-grid {
width: 40px;
height: 40px;
margin: 100px auto;
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: #333;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
#keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
div#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
</style>
</head>
<body>
<div id="preloader">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
</div>
HAVE YOUR MAIN BODY HERE
CSS FILE LINKS & JS FILE LINKS GO HERE (YOU NEED JQUERY)
<script>
$("#preloader" ).fadeOut(300);
</script>
</body>
</html>
Related
Is there a way to write the CSS code without using all the nth-child() selectors? I want to make the code more scalable in case I want to add more snowflakes in the future.
body {
background-color: red;
}
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
}
#-webkit-keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
#-webkit-keyframes snowflakes-shake {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
#keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
#keyframes snowflakes-shake {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, 0.5s;
animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s;
}
/* Demo Purpose Only*/
.demo {
font-family: 'Raleway', sans-serif;
color: #fff;
display: block;
margin: 0 auto;
padding: 15px 0;
text-align: center;
}
.demo a {
font-family: 'Raleway', sans-serif;
color: #000;
}
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">❅</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❄</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❄</div>
<div class="snowflake">❅</div>
<div class="snowflake">❆</div>
<div class="snowflake">❄</div>
</div>
Start by removing all the non needed prefixes and the default values. Then in such situation you can use inline styles combined with CSS variables to add the specific CSS. I have also updated the code a little to use flexbox and get rid of all the left values:
.snowflakes {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 9999;
pointer-events:none;
}
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
flex: 1;
position: relative;
top: -10%;
animation: snowflakes-fall 10s linear, snowflakes-shake 3s ease-in-out;
animation-delay: var(--d);
animation-iteration-count: infinite;
}
#keyframes snowflakes-fall {
100% {
top: 100%;
}
}
#keyframes snowflakes-shake {
50% {
transform: translateX(80px);
}
}
<div class="snowflakes" aria-hidden="true">
<div class="snowflake" style="--d: 0s, 0s;">❅</div>
<div class="snowflake" style="--d: 1s, 1s;">❅</div>
<div class="snowflake" style="--d: 6s, 0.5s;">❆</div>
<div class="snowflake" style="--d: 4s, 2s;">❄</div>
<div class="snowflake" style="--d: 2s, 2s;">❅</div>
<div class="snowflake" style="--d: 8s, 3s;">❆</div>
<div class="snowflake" style="--d: 6s, 2s;">❄</div>
<div class="snowflake" style="--d: 2.5s, 1s;">❅</div>
<div class="snowflake" style="--d: 1s, 0s;">❆</div>
<div class="snowflake" style="--d: 3s, 1.5s;">❄</div>
</div>
I have a set of link tags that appear on page load with translate3D. This works perfectly fine. But I need the link tags to either scale on it's hover. Which doesn't work directly.
Is there a way to achieve it with just CSS?
Here is the code :
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
opacity: 0;
padding: 0 10px;
background: rgba(0, 0, 0, 0.3);
display: inline-block;
text-align: center;
color: rgba(0, 0, 0, 0.6);
transition: all 0.5s ease;
}
.hlink:hover {
transform: translate(0px, -20px);
color: red;
background: rgba(0, 0, 0, 0.6)
}
#keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation: fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1) {
animation-delay: 1.0s;
}
.linkblock a:nth-child(2) {
animation-delay: 1.1s;
}
.linkblock a:nth-child(3) {
animation-delay: 1.2s;
}
.linkblock a:nth-child(4) {
animation-delay: 1.3s;
}
.linkblock a:nth-child(5) {
animation-delay: 1.4s;
}
.linkblock a:nth-child(6) {
animation-delay: 1.5s;
}
.linkblock a:nth-child(7) {
animation-delay: 1.6s;
}
.linkblock a:nth-child(8) {
animation-delay: 1.7s;
}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>
The issue is the use of both that allow you to keep the last state of your animation thus the transform inside the animation will override the one on the hover that will never get activated.
You can split your animation into 2 animation and use both or forwards with only opacity and you will be able to have your transition after the animation is done.
.linkblock {
margin: 20% 0;
}
.hlink {
width: 12%;
height: 60px;
padding: 0 10px;
background: rgba(0, 0, 0, 0.3);
display: inline-block;
text-align: center;
color: rgba(0, 0, 0, 0.6);
transition: all 0.5s ease;
opacity:0;
}
.hlink:hover {
transform: translate(0px, -20px) scale(1.2);
color: red;
background: rgba(0, 0, 0, 0.6)
}
#keyframes fadeInUp {
from {
transform: translate3d(0, 100%, 0);
}
}
#keyframes show {
to {
opacity:1;
}
}
.fadeInUp {
animation: fadeInUp 0.3s ease-in,
show 0.3s ease-in forwards;
}
.linkblock a:nth-child(1) {
animation-delay: 1.0s;
}
.linkblock a:nth-child(2) {
animation-delay: 1.1s;
}
.linkblock a:nth-child(3) {
animation-delay: 1.2s;
}
.linkblock a:nth-child(4) {
animation-delay: 1.3s;
}
.linkblock a:nth-child(5) {
animation-delay: 1.4s;
}
.linkblock a:nth-child(6) {
animation-delay: 1.5s;
}
.linkblock a:nth-child(7) {
animation-delay: 1.6s;
}
.linkblock a:nth-child(8) {
animation-delay: 1.7s;
}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>
Please try this:
.linkblock{
margin:20% 0;
}
.hlink{
width:12%;
height:60px;
opacity:0;
padding:0 10px;
background:rgba(0,0,0,0.3);
display:inline-block;
text-align: center;
color:rgba(0,0,0,0.6);
transition:all 0.5s ease;
transform:translate3d(0,0,0); /* add it */
}
.hlink:hover{
transform:translate3d(0,0,0) scale(1.2); /* add it */
color:red;
background:rgba(0,0,0,0.6)
}
#keyframes fadeInUp {
from{
opacity:0;
transform:translate3d(0,100%,0);
}
to{
opacity:1;
/* transform:translate3d(0,0,0); */ /* remove it */
}
}
.fadeInUp{
animation:fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1){animation-delay:1.0s;}
.linkblock a:nth-child(2){animation-delay:1.1s;}
.linkblock a:nth-child(3){animation-delay:1.2s;}
.linkblock a:nth-child(4){animation-delay:1.3s;}
.linkblock a:nth-child(5){animation-delay:1.4s;}
.linkblock a:nth-child(6){animation-delay:1.5s;}
.linkblock a:nth-child(7){animation-delay:1.6s;}
.linkblock a:nth-child(8){animation-delay:1.7s;}
<div class="linkblock">
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
fsdfsdf
</div>
You want to animate with the max-height property.
Set the max-height to say 50px on hover
set the max-height on the property itself to it's original height
Here is a working fiddle
Final css file:
.linkblock{
margin:20% 0;
}
.hlink{
width:12%;
height: 60px;
max-height: 60px; // add this
opacity:0;
padding:0 10px;
background:rgba(0,0,0,0.3);
display:inline-block;
text-align: center;
color:rgba(0,0,0,0.6);
transition:all 0.5s ease;
}
.hlink:hover{
max-height: 50px; // add this
color:red;
background:rgba(0,0,0,0.6)
}
#keyframes fadeInUp {
from{
opacity:0;
transform:translate3d(0,100%,0);
}
to{
opacity:1;
transform:translate3d(0,0,0);
}
}
.fadeInUp{
animation:fadeInUp 0.3s ease-in both;
}
.linkblock a:nth-child(1){animation-delay:1.0s;}
.linkblock a:nth-child(2){animation-delay:1.1s;}
.linkblock a:nth-child(3){animation-delay:1.2s;}
.linkblock a:nth-child(4){animation-delay:1.3s;}
.linkblock a:nth-child(5){animation-delay:1.4s;}
.linkblock a:nth-child(6){animation-delay:1.5s;}
.linkblock a:nth-child(7){animation-delay:1.6s;}
.linkblock a:nth-child(8){animation-delay:1.7s;}
Basically just trying to make an animation which switches between an 0 and an o repeatedly without them overlaping.
Any ideas?
https://jsfiddle.net/ckfoch7v/
.rw-words-1 span{
animation: rotateWordsFirst 0.3s linear 0s infinite;
left: 11px;
top: 2px;
}
.rw-words span:nth-child(2) {
animation-delay: 0.2s;
}
.rw-words span:nth-child(3) {
animation-delay: 0.4s;
}
.rw-words span:nth-child(4) {
animation-delay: 0.6s;
}
.rw-words span:nth-child(5) {
animation-delay: 0.8s;
}
.rw-words span:nth-child(6) {
animation-delay: 0.9s;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: linear; height: 0px; }
95% { opacity: 1;}
98% { opacity: 0; }
}
Try with two spans.
It will work.
HTML
<div class="alien"> <span>\ /</span>
<span>.</span>
<section class="rw-wrapper">
<div class="rw-sentence">
<div class="rw-words rw-words-1">
<span>0</span>
<span>o</span>
</div>
</div>
</section>
</div>
Demo Here
I created 2 keyframes. The 1st keyframe is applied to all elements with class .drop-in. And the 2nd keyframe is specific to an element with class .look-at-me, when the 1st keyframe animation has finished.
The problem is, even though I have added a delay on the 2nd keyframe for the class .look-at-me, all animations are still occurring at the same time instead of applying the delay.
Can someone help me fix this?
Check my work here: Codepen
HTML :
<ul class="box-list">
<li>
<div class="box drop-in">
<h1>The Box</h1>
</div>
</li>
<li>
<div class="box drop-in">
<h1>The Box</h1>
</div>
</li>
<li>
<div class="box drop-in look-at-me">
<h1>The Box</h1>
</div>
</li>
<li>
<div class="box drop-in">
<h1>The Box</h1>
</div>
</li>
</ul>
LESS :
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
}
.box-list {
list-style: none;
li {
width: 140px;
height: 145px;
display: inline-block;
margin-right: 24px;
position: relative;
&:last-child {
margin-right: 0;
}
.drop-in {
-webkit-animation: drop-in-anim 0.3s forwards;
-moz-animation: drop-in-anim 0.3s forwards;
animation: drop-in-anim 0.3s forwards;
opacity: 0;
}
.look-at-me {
-webkit-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
-moz-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
-webkit-animation-delay: 0s, 20s;
-moz-animation-delay: 0s, 20s;
animation-delay: 0s, 20s;
}
&:nth-child(1) {
.drop-in {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
}
&:nth-child(2) {
.drop-in {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
}
&:nth-child(3) {
.drop-in {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
}
&:nth-child(4) {
.drop-in {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
}
.box {
padding: 6px;
border: 1px solid #333;
background: #fff;
z-index: 5;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
&:hover,
&.look-at-me {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
}
}
}
#-webkit-keyframes drop-in-anim {
0% {
opacity: 0;
position: absolute;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#-moz-keyframes drop-in-anim {
0% {
opacity: 0;
position: absolute;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#keyframes drop-in-anim {
0% {
opacity: 0;
position: absolute;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#-webkit-keyframes look-at-me-anim {
50% { -webkit-transform: scale(1.4); }
75% { -webkit-transform: scale(1.2); }
100% { -webkit-transform: scale(1.3); margin: 0 12px; }
}
#-moz-keyframes look-at-me-anim {
50% { -moz-transform: scale(1.4); }
75% { -moz-transform: scale(1.2); }
100% { -moz-transform: scale(1.3); margin: 0 12px; }
}
#keyframes look-at-me-anim {
50% { transform: scale(1.4); }
75% { transform: scale(1.2); }
100% { transform: scale(1.3); margin: 0 12px; }
}
You are overwriting your delay with this.
&:nth-child(3) {
.drop-in {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
}
you could also write the delay in shorthand:
.look-at-me {
-webkit-animation:drop-in-anim 0.3s ease-in 0.4s forwards,
look-at-me-anim 0.5s ease-in 1s forwards;
}
I currently have 5 crossfading images with a hover div to appear above the image. I have added a link reference to each image below and set the css to the "a" component in order for the images to pan in and out properly.
.crossfade_container {
display: inline-block;
float: right;
position: relative;
background-color: #f0f0f0;
width: 695px;
height: 350px;
margin-top: 10px;
box-shadow: 2px 2px 2px silver;
}
#crossfade a {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 60s linear infinite 0s;
-moz-animation: imageAnimation 60s linear infinite 0s;
-o-animation: imageAnimation 60s linear infinite 0s;
-ms-animation: imageAnimation 60s linear infinite 0s;
animation: imageAnimation 60s linear infinite 0s;
}
#crossfade .caption {
font-size: 30px;
opacity: 0;
position: absolute;
height: 75px;
width: 665px;
bottom: 0px;
left: 0px;
color: white;
background: #00274c;
text-align: left;
padding-top: 10px;
padding-left: 30px;
border-bottom: 1px solid #00274c;
font-weight: bold;
line-height: 25px;
-o-transition: .7s;
-ms-transition: .7s;
-moz-transition: .7s;
-webkit-transition: .7s;
transition: .7s;
}
#crossfade .caption span3 {
font-size: 13px;
}
#crossfade:hover .caption {
cursor: pointer;
opacity: 1.0;
}
#crossfade:hover img {
cursor: pointer;
}
#crossfade a:nth-child(2) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade a:nth-child(3) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade a:nth-child(4) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
#crossfade a:nth-child(5) {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
#-webkit-keyframes imageAnimation {
5% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
<div class="crossfade_container">
<div id="crossfade">
<a href="http://espn.com">
<img src="the-schott.png" alt="" />
<div class="caption">PREVIEW:
<br />
<span3>preview addition info</span3>
</div>
</a>
<a href="http://yahoo.com">
<img src="stump.png" alt="" />
<div class="caption">TITLE TWO
<br />
<span3>subtitle two</span3>
</div>
</a>
<a href="http://gmail.com">
<img src="um_huddle1.png" alt="" />
<div class="caption">TITLE ONE
<br />
<span3>subtitle one</span3>
</div>
</a>
<a href="http://hotmail.com">
<img src="osu_crossfade2.png" alt="" />
<div class="caption">Caption Goes Here</div>
</a>
<a href="http://fox.com">
<img src="um_qb1.png" alt="" />
<div class="caption">Caption Goes Here</div>
</a>
</div>
</div>
I cannot figure out why every time i click on the image or "caption" div, i am directed to fox.com??
As you put opacity to 0, all the elements are still there (they are not visible but they are still reachable by click). This is why your last element <a href="http://fox.com"> is still virtually in front of all the others elements and is the one wich is triggered on click. Try to add display:none/block in your animation or use z-index to organize a hierarchy between all your <a> component.
Use z-index to organize a hierarchy.