Hi this is my first time making a website from complete scratch and I'm trying to make my site have changing background pictures without actually being the background-image (because I didn't know how)
The problem is I can't get Text to appear ONTOP of the images, I'VE TRIED EVERYTHING GOOGLE.COM HAS LINKED ME TO.
How do I put the images in the back so far to the point where anything automatically appears over it, while keeping it in the center?
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Home</title>
<link href="css/background.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This is the content for Layout P Tag</p>
<img src="4.jpg" style= "height: 100%; width: 100%" align="absbottom">
<img src="3.jpg" style= "height: 100%; width: 100%" align="absbottom">
<img src="2.jpg" style= "height: 100%; width: 100%" align="absbottom">
<img src="1.jpg" style= "height: 100%; width: 100%" align="absbottom">
</body>
</html>
CSS Code
body img {
position:absolute;
max-width: auto;
height: auto;
}
.radio {
position:absolute;
}
#-webkit-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
body img {
position: absolute;
top: 0;
right: 0;
z-index: 1;
-webkit-animation-name: imgFade;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 64s;
-moz-animation-name: imgFade;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 64s;
-o-animation-name: imgFade;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 64s;
animation-name: imgFade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 64s;
}
body img:nth-of-type(1) {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
animation-delay: 48s;
}
body img:nth-of-type(2) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
animation-delay: 32s;
}
body img:nth-of-type(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
}
body img:nth-of-type(4) {
-webkit-animation-delay: 8;
-moz-animation-delay: 8;
-o-animation-delay: 8;
animation-delay: 8;
}
You needed a z-index:2 and position:relative on p tag.
p {position:relative;z-index:2;}
Full code:
body img {
position:absolute;
max-width: auto;
height: auto;
}
.radio {
position:absolute;
}
#-webkit-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
body img {
position: absolute;
top: 0;
right: 0;
z-index: 1;
-webkit-animation-name: imgFade;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 64s;
-moz-animation-name: imgFade;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 64s;
-o-animation-name: imgFade;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 64s;
animation-name: imgFade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 64s;
}
body img:nth-of-type(1) {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
animation-delay: 48s;
}
body img:nth-of-type(2) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
animation-delay: 32s;
}
body img:nth-of-type(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
}
body img:nth-of-type(4) {
-webkit-animation-delay: 8;
-moz-animation-delay: 8;
-o-animation-delay: 8;
animation-delay: 8;
}
p {position:relative;z-index:2;border:1px solid #ff0000;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Home</title>
</head>
<body>
<p>This is the content for Layout P Tag</p>
<img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
<img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
<img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
<img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
</body>
</html>
Related
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%;
}
I want a smooth css3 slider which is having .png images. On start all the images are displayed for once after that it works fine. I need help to hide three images that are loading when transition starts.
If anybody can help... would be very glad.
PS : I am working on some tool which is restricted use of jquery/javascript. Due to which many solution to my problem aren't implementable.
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:571px;
width:931px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 24s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 24s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 24s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 24s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
animation-delay: 18s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
visibility: visible;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
<div id="cf4a" class="shadow">
<img src="header-img-1.png" />
<img src="header-img-2.png" />
<img src="header-img-3.png" />
<img src="header-img-4.png" />
</div>
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
25% {
opacity:0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a {
position:relative;
height:571px;
width:931px;
margin:0 auto;
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation: cf4FadeInOut 24s ease-in-out infinite;
-moz-animation: cf4FadeInOut 24s ease-in-out infinite;
-o-animation: cf4FadeInOut 24s ease-in-out infinite;
animation: cf4FadeInOut 24s ease-in-out infinite;
}
#cf4a img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
animation-delay: 18s;
}
#cf4a img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
#cf4a img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
visibility: visible;
}
#cf4a img:nth-child(1) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
<div id="cf4a" class="shadow">
<img src="header-img-1.png" />
<img src="header-img-2.png" />
<img src="header-img-3.png" />
<img src="header-img-4.png" />
</div>
I hope this solves your problem, thy this working fiddle https://jsfiddle.net/3t8qysk6/
I am trying to change background images automatically by using css3. I have 9 images to change in background. The problem I am facing is, it displays only first and last image in sliding but not the 2, 3, 4, 5, 6, 7, 8. I have following code:
<img id="img1" src="images/1.gif">
<img id="img2" src="images/2.gif">
<img id="img3" src="images/3.gif">
<img id="img4" src="images/4.gif">
<img id="img5" src="images/5.gif">
<img id="img6" src="images/6.gif">
<img id="img7" src="images/7.gif">
<img id="img8" src="images/8.gif">
<img id="img9" src="images/9.gif">
and here is the CSS:
#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9 {
width:610px;
height:610px;
position:scroll;
z-index:-1;
animation-name: test;
animation-duration: 90s;
opacity:0;
}
#img2 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img3 {
animation-delay:20s;
-webkit-animation-delay:20s
}
#img4 {
animation-delay:30s;
-webkit-animation-delay:30s
}
#img5 {
animation-delay:40s;
-webkit-animation-delay:40s
}
#img6 {
animation-delay:50s;
-webkit-animation-delay:50s
}
#img7 {
animation-delay:60s;
-webkit-animation-delay:60s
}
#img8 {
animation-delay:70s;
-webkit-animation-delay:70s
}
#img9 {
animation-delay:80s;
-webkit-animation-delay:80s
}
#-webkit-keyframes test {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes test {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
The time of delay for each slide from 1 to 8 is 10s except image9, which has delay time 8.60s.
Please help where I am going wrong. :(
Okay I have made a JS Fiddle, and I think i've come up with what you want.
http://jsfiddle.net/d48vdxmv/2/
Basically, you need to wrap your images in a container first:
<div id="container">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_03.jpg">
<img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_04.jpg">
</div>
Then in the CSS, set the container to be relative position, and the images to be absolute so they stack ontop of each other.
#container {
position:relative;
height:610px;
width:610px;
}
#container img {
position:absolute;
left:0;
}
Then add your keyframes, with the different browser variations
#-webkit-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes imgFade {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
Then your animation details for all browsers
#container img {
-webkit-animation-name: imgFade;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: imgFade;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: imgFade;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: imgFade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
And finally your duration times for each image
#container img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#container img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#container img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#container img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
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
I have 4 images that I would like to crossfade using CSS inside a container:
<div id="frame">
<img class="img1" src="img1.jpg">
<img class="img2" src="img2.jpg">
<img class="img3" src="img3.jpg">
<img class="img4" src="img4.jpg">
</div>
I know that crossfading images consists of a CSS animation, but I haven't been able to find the CSS to make it work. Any help would be appreciated, thanks!
Here is a Fiddle
It's easier with 2 pictures, but as your wrote 4 you need to do this as CSS:
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#Crossfading {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#Crossfading img {
position:absolute;
left:0;
}
#Crossfading img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#Crossfading img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#Crossfading img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#Crossfading img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#Crossfading img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}