I'm trying to create an affect where the initial image is displayed longer than the subsequently animated
images. I'd like the first item to appear for 10 seconds and the others to display for 6. I tried tweaking the timings, forcing an opacity for the first image, and noting seems to quite work. I feel like I'm missing something crucial about how this works.
I think I get how the following images get their timing of 6 seconds, but what is determining the animation timing of the first one? Can I just tell it to wait 4 seconds before it begins the loop so the first image rests on the page longer?
.plattxt,
.goldtxt,
.coptxt {
color: #6b6052;
text-align: right;
font-size: 12px;
position: absolute;
bottom: 0;
width: 86%;
margin-top: 93px;
top: 0;
font-weight: bold;
}
.item {
width: 100%;
height: 100px;
display: inline-block;
position: relative;
}
.items {
background: white;
border-radius: 10px;
border: 4px solid #f6921e;
min-height: 120px
}
.item .img-thumbnail {
height: 100px;
display: inline-block;
position: relative;
}
.item img {
max-height: 85px;
top: 55px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 230px;
position: absolute;
}
.items h3 {
text-align: center;
font-size: 25px;
color: #6b6052;
font-weight: bold;
margin-top: 24px;
line-height: 30px;
}
#crossfade>.fadecont {
display: block;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
#crossfade>.fadecont:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade>.fadecont:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade>.fadecont:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade>.fadecont:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% {
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="col-md-6 " style="margin-top: 20px;">
<div class="items">
<div class="row">
<div class="col-md-6">
<h3><i>Thank You to Our<br>2021 Sponsors!</i></h3>
</div>
<div class="col-md-6">
<div class="item" id="crossfade">
<div class="fadecont">
<img class="img-responsive" src="#" />
<span class="plattxt">Platinum</span>
</div>
<div class="fadecont">
<img class="img-responsive" src="#" />
<span class="goldtxt">Gold</span>
</div>
<div class="fadecont">
<img class="img-responsive" src="#" />
<span class="goldtxt">Gold</span>
</div>
<div class="fadecont">
<img class="img-responsive" src="#" />
<span class="goldtxt">Gold</span>
</div>
<div class="fadecont">
<img class="img-responsive" src="#" />
<span class="coptxt">Copper</span>
</div>
</div>
</div>
</div>
</div>
</div>
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>
first of all sorry for my English. I am new in css. i have given this effect to text.
i just want to stop this animation once its done for all the sentences,
there are 6 sentences with 3sec delay between each two,after last sentence completion
i want to display all sentences together and wants to keep as it is,but it will again
start animation from first sentence.how can i stop this?
please help me if anyone knows.thanks in advance.this is my css code
.rw-words-1 span{
font-size: 150%;
line-height: 120%;
-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
-ms-animation: rotateWordsFirst 18s linear infinite 0s;
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWordsFirst {
0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes rotateWordsFirst {
0% { opacity: 0; animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
<section class="rw-wrapper">
<h2 class="rw-sentence">
<div class="rw-words rw-words-1">
<span>beautiful websites</span>
<span>interesting apps</span>
<span>impactful identities</span>
<span>working strategies</span>
<span>incredible gadgets</span>
<span>intelligent systems</span>
</div>
</h2>
</section>
That is due to infinite in animation inside .rw-words-1 span.Just remove that and it works fine.
.rw-words-1 span{
font-size: 150%;
line-height: 120%;
-webkit-animation: rotateWordsFirst 18s linear;
-ms-animation: rotateWordsFirst 18s linear;
animation: rotateWordsFirst 18s linear;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWordsFirst {
0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes rotateWordsFirst {
0% { opacity: 0; animation-timing-function: ease-in; width: 0px;}
5% { opacity: 1; animation-timing-function: ease-out; width: 100%;}
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
<section class="rw-wrapper">
<h2 class="rw-sentence">
<div class="rw-words rw-words-1">
<span>beautiful websites</span>
<span>interesting apps</span>
<span>impactful identities</span>
<span>working strategies</span>
<span>incredible gadgets</span>
<span>intelligent systems</span>
</div>
</h2>
</section>
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: 1;
-webkit-animation-timing-function: ease-in;
display: none;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
display: block;
}
17% {
opacity: 1
display: block;
}
25% {
opacity: 0
display: block;
}
100% {
opacity: 0
display: block;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 1;
-moz-animation-timing-function: ease-in;
display: none;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
display: block;
}
17% {
opacity: 1
display: block;
}
25% {
opacity: 0
display: block;
}
100% {
opacity: 0
display: block;
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 1;
-o-animation-timing-function: ease-in;
display: none;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
display: block;
}
17% {
opacity: 1
display: block;
}
25% {
opacity: 0
display: block;
}
100% {
opacity: 0
display: block;
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 1;
-ms-animation-timing-function: ease-in;
display: none;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes imageAnimation {
0% {
opacity: 1;
animation-timing-function: ease-in;
display: none;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
I am trying to figure out how to insert display: block and display: none within the keyframe animation css to be able to link to the correct website. Each image has a different url associated with it. my method is not working properly.
<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>
I have managed to come up with something using z-index in order to achieve what I want. For each keyframe animation (5), I used the following CSS:
#-webkit-keyframes imageAnimation {
5% {
opacity: 1;
-webkit-animation-timing-function: ease-in;
z-index: 100;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
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.