Speed Code - Full Screen Automatic Image Slider Background - HTML | CSS

Source Code:

Song
Cartoon - On & On (feat. Daniel Levi) [NCS Release]
▽ Follow Cartoon

▽ Follow Daniel Levi (vocalist)

[isischan]

*Wow it worked! Thank you sooo much for that beautiful fast and easy tutorial, it really helped a lot, you just saved my school project ❤️

[josealejandrosanchez]

jajaj funciono bien gracias :p y aqui lo dejo para el que no le funciono
*{
margin:0;
padding: 0;

}
.load{
animation: slide 2s;
}
.slider{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
animation: slide 40s infinite;
}
.content{
color: #fff;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
.principal{
left: 50px;
top: 50px;
transition: translate(-50%, -50%);
position: absolute;
letter-spacing: 5px;
text-align: center;
}
.principal h1{
font-size: 70px;
margin-bottom: 20px;
}
.principal p{
font-size: 20px;

}



@keyframes slide{
0%{
background-image: url(imagenes/3.jpg);
}
50%{
background-image: url(imagenes/2.jpg);
}
100%{
background-image: url(imagenes/1.jpg);
}
}

[wikimediardcongowmdrc-ug]

Très simple, très propres, tro pratique. 5 étoiles bro

[bloodshed]

is there a fade in and out version? i really like this but i want it to look a little smoother

[maxi-g]

AWSOME!!! - But can i change the transitions? A smooth fade ?

[MeyKoo]

Thank you very much! I have one question though, so everything works but i'm confused as to what the purpose of the LOAD DIV is. I can see the difference of having a LOAD dive and having no load DIV but how did you know you had to have a LOAD div?

[marisagonzalez]

hey! Great video! Working perfectly here. Thanks!! Is there a way of making the transition from one picture to another smoother? as in a fade effect?

[_mansighedia]

Image is not getting displayed ???any solution

[cloud.y]

Wow thank U so much this worked perfectly

[sundeepkumaroad]

Slider is not supported in some web browsers, so I tried to use firefox and it worked for me:

In styles.css files instead of Writing @keyframes slide, Write @-moz-keyframes slide.

[ashwinmalya]

why you opened class i.e load div, with out that also working fine, any reason?

[PP-sprv]

Code does't work.
Can something send source code?

[topknotclare]

THANK YOU SO MUCH. It has been SO difficult to find this effect demonstrated in a simple and effective way like this. Very nice work!

[EduardoMartinez-dmpp]

I honestly dont know what is wrong but I triple checked this code and it just wont work for me, images are not being displayed and I have no idea why, literally made a "copy paste" and is not working... still gratzz for those with luck that got thiss thing running haha

[renehinojosa]

Love the tutorial and have a question. I'd like to add an image like a logo, say to the left or bottom the word "Website." What would be the code to do that? Thanks in advance!

[agresiv]

Excelente aporte, solo hay un detalle.. como podes hacer para que la transicion sea mas sutil y no tan brusca?

[elainedacanay]

Why is there a need for class="load"? If it will work without it?

[papawilk]

Any idea why my last image is not showing up and only showing the blank background?

[betyglez]

Hola, me podrían ayudar.. funciona a la perfección en Chrome pero en explorer no se ve lo que esta agregado dentro de los keyframes. Se los agradecería mucho.

[vaclavhruza]

I tried to exclude the .load element and haven't noticed any major change.
Does anyone know what is the purpose of having two animations taking place at same location, only with different duration (2s vs 40s)?