18041 sujets

Questions générales et questions de débutants

[Résolu] Problème caroussel css/html

Bonjour à tous,
Voilà je débute ,je m'exerce sur de petits projets mais là j'ai un souci....
Je veux faire un carrousel d'image traversant l'écran mais au début je ne veux aucunes images
mais quand je lance le code une image est fixe sur l'écran et le carrousel défile en arrière plan .
Voila mon code:
<!DOCTYPE html>
<html>
<head>
<title>Motivation et Pop-up</title>
</head>
<body>
<div class="content">
<img id="image1" src="https://pi.tedcdn.com/r/tedideas.files.wordpress.com/2015/05/dan_ariely_work_ideas-ted-com.jpg?">
<img id="image2" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.0BqqEiG9lBsxDfz51EN9kwHaHa%26pid%3D15.1&f=1">
<img id="image3" src="http://www.propagandan.com/wp-content/uploads/2015/02/Motivation-Required-Saucer.png">
<img id="image4" src="https://www.hdwallpaper.nu/wp-content/uploads/2015/06/fitness-motivation-16362.jpg">
<img id="image5" src="https://previews.123rf.com/images/jozefmicic/jozefmicic1512/jozefmicic151200023/49258312-travailler-dur-de-motivation-vecteur-de-fond-de-l-affiche-avec-la-main-et-le-doigt-de-pointage-em.jpg">
<img id="image6" src="http://1.bp.blogspot.com/-0wpvHHlhtUk/TmSvF6LHIPI/AAAAAAAAAVE/Dg7sobzydhc/s1600/Focus-Motivational-Wallpapers-4.jpg">
<img id="image7" src="https://wonderfulengineering.com/wp-content/uploads/2014/10/motivational-wallpaper-11.jpg">
<img id="image8" src="http://m.cdn.blog.hu/ne/nerdblog/image/Terence%20Hill%20(Girotti).jpg">
<img id="image9" src="http://images6.fanpop.com/image/photos/32300000/Bruce-Lee-bruce-lee-32330985-500-279.jpg">
<img id="image10" src="https://image.freepik.com/free-photo/man-jumping-over-impossible-or-possible-over-cliff-on-sunset-background-business-concept-idea_1323-265.jpg">
<img id="image11" src="https://i.ytimg.com/vi/wQDdbJbu_Sc/maxresdefault.jpg">

</div>
</body>
Et le css


body,html {

background:#cd6133;
overflow:hidden;
margin:0;
padding:0;


}


#image1{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;

animation: move 5s ease 5s;

}
#image2{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 10s;
}

#image3{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 15s;
}

#image4{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 20s;
}

#image5{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 25s;
}
#image6{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 30s;

}
#image7{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 35s;
}
#image8{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 40s;
}

#image9{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 45s;
}

#image10{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;
animation: move 5s ease 50s;
}

#image11{
width:300px;
height:300px;
position:absolute;
top:150px;
left:150px;

animation: move 5s ease 55s;
}

@keyframes move
{
0%
{
top:100px;
left:100px;
transform :scale(.4);
}
50%
{
top:100px;
left:350px;
transform :scale(1);
}
100%
{
top:100px;
left:550px;
transform :scale(.4);
}

}
J'ai utilisé l'overflow:hidden pour parer cet effet mais celà ne fonctionne pas!!
Si quelqu'un à une idée....merci d'avance
Merci beaucoup Alias,
Cela m'a été très utile,apparemment je ne prenais pas le problème dans le bon sens .
Je m'acharnais à vouloir cacher l'image alors qu'un delay et une opacité suffisent.
Sympa pour les liens je vais travailler dessus. Smiley biggrin
Sujet clos
Aller à