I got the following code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<div class="crossfade">
<img src="http://lorempixel.com/400/200/animals/1">
<img src="http://lorempixel.com/400/200/animals/2">
<img src="http://lorempixel.com/400/200/animals/3">
<img src="http://lorempixel.com/400/200/animals/4">
<img src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
And the following css (copied from elsewhere Multiple image cross fading in CSS - without (java) script)
.container
{
width:100px;
}
.crossfade > img {
position: absolute;
top: 0px;
left: 0px;
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 > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.crossfade > img: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 }
}
What I want is that the images are resized to the size of the container.
Here is a suggestion, that deals with different image sizes and kept aspect ratio.
If you resize the browser window, it still plays nicely with all the images.
Updated on request, using 1 container
html, body {
margin: 0;
}
.slider {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #fff;
}
.slider .image {
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity:0;
animation: sliderimagefade 20s 0s infinite;
}
.slider .image:nth-child(5) {
animation-delay: 0s;
}
.slider .image:nth-child(4) {
animation-delay: 4s;
}
.slider .image:nth-child(3) {
animation-delay: 8s;
}
.slider .image:nth-child(2) {
animation-delay: 12s;
}
.slider .image:nth-child(1) {
animation-delay: 16s;
}
#keyframes sliderimagefade {
0% {
opacity:0;
}
5% {
opacity:1;
}
25% {
opacity:1;
}
30% {
opacity:0;
}
}
<div class="slider">
<div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/1')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/400/100/animals/2')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/200/400/animals/3')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/4')">
</div>
<div class="image" style="background-image: url('http://lorempixel.com/300/300/animals/5')">
</div>
</div>
If you just want to fill container, you can use:
img{
width: 100%;
height: 100%
}
But this solution probably will not keep aspect ratio.
If your .container is 200px width and 100px height you will have the following ;
<body>
<div class="container" style="width:200px;height:100px;" >
<div class="div2">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/1">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/2">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/3">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/4">
<img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
And if you don't want to use inline css you will need to create a new file, for example style.css and then add a <link> to this file :
<link rel="stylesheet" href="style.css" />
<body>
<div class="container">
<div class="div2">
<img src="http://lorempixel.com/400/200/animals/1">
<img src="http://lorempixel.com/400/200/animals/2">
<img src="http://lorempixel.com/400/200/animals/3">
<img src="http://lorempixel.com/400/200/animals/4">
<img src="http://lorempixel.com/400/200/animals/5">
</div>
</div>
File style.css (should be in the same folder)
.container{
width:200px;
height:100px;
}
.container .div2 img{
width:100%;
height:100%;
}
Related
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>
My background images are all too stretched width wise and I have tried countless things to try and make it work. I have changed width parameters, height parameter, looked on different sights for answers, and could not find anything that worked. The pictures are background images and are in an animation to fade through the images. I am using Google Chrome as the browser and pictures that I have on my desktop. I found some pictures online to add in the snippet.
#crossfade > img {
width:100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
-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 > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img: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 }
}
<html>
<div id= 'crossfade'>
<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>
</html>
This is due to image aspect ratio. Instead of adding img element add a div element with a background-image. you can then play with the height, position accordingly. It will keep your aspect ration intact. Please see the below solution or run it in codepen https://codepen.io/salinaacharya/pen/PVowPz
<html>
<div id= 'crossfade'>
<div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/1.jpg)">
</div>
<div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/2.jpg)">
</div>
<div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/3.jpg)">
</div>
<div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/4.jpg)">
</div>
</div>
</html>
#crossfade > .image-box {
width:100%;
height:500px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
-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;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
#crossfade > .image-box:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > .image-box:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > .image-box:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > .image-box: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 }
}
You need to remove the property width or height from your #crossfade element in order the have a correct scaling, you can set min-width and min-height in order to achieve the full screen mode that you're looking for, although you might lose some of the image visibility.
#crossfade > img {
min-width: 100%;
min-height: 100%;
}
Try adding object-fit: cover to the image
#crossfade>img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
animation: imageAnimation 30s linear infinite 0s;
}
#crossfade>img:nth-child(2) {
animation-delay: 6s;
}
#crossfade>img:nth-child(3) {
animation-delay: 12s;
}
#crossfade>img:nth-child(4) {
animation-delay: 18s;
}
#crossfade>img:nth-child(5) {
animation-delay: 24s;
}
#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 id='crossfade'>
<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>
I'm having a bit of trouble getting a crossfade animation to stop on the last nth-child. I'm aware of animation-fill-mode: forwards , but it doesn't seem to work (I've tried putting it in different places to such as in the initial .crossfade declaration.)
Here's my html:
<body>
<div class= "ad">
<div class="crossfade">
<img src="image1.jpg" alt="Image 1">
<img src="image2.png" alt="Image 2">
<img src="image3.png" alt="Image 3">
<img src="image4.png" alt="Image 4">
</div>
</div>
</body>
And my CSS is here:
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
animation-iteration-count:1;
-webkit-backface-visibility: hidden;
-webkit-animation-name: imageAnimation;
-webkit-animation: imageAnimation 43s linear 1 0s;
-moz-animation: imageAnimation 43s linear 1 0s;
-o-animation: imageAnimation 43 linear 1 0s;
-ms-animation: imageAnimation 43 linear 1 0s;
}
.crossfade > img:nth-child(1) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-o-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-o-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
animation-fill-mode: forwards;
}
#-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 }
}
I'm not quite sure what I'm doing wrong or what I'm missing. Thanks in advance!
Since your #keyframes rule ends with opacity: 0 it doesn't matter if you use forwards or not, its end state will be opacity: 0 for both.
One solution would be to add a 2nd #keyframes rule for the last item, together with forwards.
Note, I removed all the prefixed properties to make is easier to parse the code. Also, the original code lacked a lot of the non prefixed, both properties and keyframe rules, and you should also always put the prefixed properties before the non prefixed
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
backface-visibility: hidden;
animation: imageAnimation 43s linear 0s 1 forwards;
}
.crossfade > img:nth-child(1) {
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
animation-delay: 21s;
animation-name: imageAnimationLast;
}
#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}
}
#keyframes imageAnimationLast {
0%{ opacity:0;
animation-timing-function: ease-in; }
8% { opacity: 1;
100% { opacity: 1}
}
<div class= "ad">
<div class="crossfade">
<img src="http://placehold.it/200/f00" alt="Image 1">
<img src="http://placehold.it/200/ff0" alt="Image 2">
<img src="http://placehold.it/200/0ff" alt="Image 3">
<img src="http://placehold.it/200/00f" alt="Image 4">
</div>
</div>
Based on what you intend to do with those items and how they overlap, and as the 2nd is on top of the 3rd and so on, you could simply let the #keyframes rule stay at opacity: 1
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
backface-visibility: hidden;
animation: imageAnimation 43s ease-in 0s 1 forwards;
}
.crossfade > img:nth-child(1) {
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
animation-delay: 21s;
}
#keyframes imageAnimation {
0%{ opacity:0; }
8% { opacity: 1; }
100% { opacity: 1; }
}
<div class= "ad">
<div class="crossfade">
<img src="http://placehold.it/200/f00" alt="Image 1">
<img src="http://placehold.it/200/ff0" alt="Image 2">
<img src="http://placehold.it/200/0ff" alt="Image 3">
<img src="http://placehold.it/200/00f" alt="Image 4">
</div>
</div>
Refer this as an example, you could even try it like this, calling a declared animation again and again on each child after certain delay.
Now animation-fill-mode:forwards takes into account the last property of animation that ends at 100% i.e. on animation end what was the value of your opacity will be applied. In below example I have used animation-fill-mode:forwards for each image to perform that color-transition of images.
div img {
width: 250px;
height: 250px;
position: absolute;
}
div img:nth-child(1) {
opacity: 0;
animation: mv 10s linear forwards;
}
div img:nth-child(2) {
opacity: 0;
animation: mv 10s linear 10s forwards;
}
div img:nth-child(3) {
opacity: 0;
animation: mv 10s linear 20s forwards;
}
div img:nth-child(4) {
opacity: 0;
animation: mv 10s linear 30s forwards;
}
#keyframes mv {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div>
<img src="http://placehold.it/301/f22" alt="Image 1">
<img src="http://placehold.it/302/f2f" alt="Image 2">
<img src="http://placehold.it/303/ff2" alt="Image 3">
<img src="http://placehold.it/304/2f2" alt="Image 4">
</div>
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.
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.
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