Adding links to crossfaded images css - html

Question

I currently have the following HTML:
<div class="crossfade_container">
<div id="crossfade">
****<img src="osu_crossfade1.png" alt="Ohio State Cheerleaders waving OHIO flags" />****
****<a href="#"><img src="um_huddle1.png" alt="Michigan Players in team Huddle" />****
****<img src="osu_crossfade2.png" alt="Overlooking Independence Hall from Ohio Stadium" />****
****<img src="um_qb1.png" alt="Devin Gardner Scrambles out of the pocket" />****
****<img src="osu_crossfade3.png" alt="Ohio Stadium on Gameday" />****
</div>
</div>
And the CSS:
.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** img {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-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 }
}
I would like to add to surround the crossfaded images so they are able to be links and not just images. However, whenever do so, it destroys the css I have in place. thanks for the help!

Answer 1

Need to remove or update all > CSS declarations: > indicates a direct child and no longer works because img is now a child of a, not a direct descendent of #crossfade. See updated code block below which adds a before img which translates to "direct descendent of #crossfade a, descendent img of a".
.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 img {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > a img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > a img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > a img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > a img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-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 }
}
What happens if you update all img instances to your a container element?
.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 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > a:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > a:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > a:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > a:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-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 }
}
If you aren't opposed to a little jQuery, you could also eliminate all anchor tags and do:
<img src="" data-href="http://url.com/" ... />
jQuery:
$(".crossfade_container img").on( "click", function(){
window.open( $(this).data("href");
});
CSS add the pointer cursor:
.crossfade_container img {
cursor: pointer;
}

Answer 2

Here it is
.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 img {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-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="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
</div>
</div>