crossfade images with ability to move div container in html/css - html

Question

HTML/CSS noob here. I currently have 5 images that overlay one another and fade in-and-out in 8 second intervals. In order to do this, I have set the images to have an absolute positioning. I am now in the process of creating this site dynamically so I would like to put these crossfading images within a div ("crossfade_container") so I can then center them as the browser size changes. Obviously, with the absolute positioning on the images itself will not allow for this dynamic positioning.
The following is my HTML:
<div class="crossfade_container">
<div id="crossfade">
<img src="Images/Michigan_1.png" />
<img src="Images/Miller_1.png" />
<img src="Images/OSU_Helmets.png" />
<img src="Images/Go_Blue.png" />
<img src="Images/OSU_UM.png" />
</div>
</div>
The following is my CSS to create crossfade between images:
#crossfade > img {
width: 695px;
height: 350px;
position: absolute;
top: 240px;
left: 441px;
color: transparent;
opacity: 0;
z-index: 0;
box-shadow: 2px 2px 2px silver;
-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 }
}
To this point, everything is how I would like it. It's the dynamic aspect of the code that is confusing me. Here is the following code I am using to no avail:
#media screen and (min-width : 481px) and (max-width: 695px) {
.crossfade_container {
display: block;
float: none;
background-color: red;
width: 480px;
height: 255px;
margin-left: auto;
margin-right: auto;
}
#crossfade > img {
width: 480px;
height: 235px;
position: relative;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
}
With this, ".crossfade_container" is exactly where I want it and by changing the position to "relative" within "#crossfade > img" only the first image in the series appears where I would like it. Now instead of the images being stacked on top of one another, they now appear in series going down the page - as if they are block elements (hope that makes sense).
Please help & let me know if I need to clarify anything. Thanks.

Answer 1

You could do it by using css position: relative; to .crossfade_container and position: absolute; to #crossfade > img
JSFiddle - DEMO
HTML:
<div class="crossfade_container">
<div id="crossfade">
<img src="Images/Michigan_1.png" style="background: red;">
<img src="Images/Miller_1.png" style="background: blue;">
<img src="Images/OSU_Helmets.png" style="background: pink;">
<img src="Images/Go_Blue.png" style="background: orange;">
<img src="Images/OSU_UM.png" style="background: black;">
</div>
</div>
CSS:
#crossfade > img {
width: 695px;
height: 350px;
position: absolute;
top: 50px;
left: 50px;
color: transparent;
opacity: 0;
z-index: 0;
box-shadow: 2px 2px 2px silver;
-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
}
}
#media screen and (min-width : 481px) and (max-width: 695px) {
.crossfade_container {
position: relative;
display: block;
float: none;
background-color: red;
width: 480px;
height: 255px;
margin-left: auto;
margin-right: auto;
}
#crossfade > img {
width: 480px;
height: 235px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
}
For More Info:
Mozilla MDN CSS Position