Du texte sur mon image! :( Fermé

Question

Bonjour, J'ai un ptit soucis! J'ai suivis un ptit tuto pour fabriquer un slider en CSS et HTML, il fonctionne :)!! En revanche je n'arrive pas à mettre du texte sur les images de mon slider. Si l'un de vous sait comment faire! Le code est très court! Voiçi :

/code> le CSS :


<-- GESTION DU SLIDER --!>
div#slider { width: 100%; text-align:center;}

div#slider figure {
  position: relative; 
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: center;
}

div#slider figure img { width: 20%; height: auto; }

div#slider { width: 100%; overflow: hidden }

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}
<-- FIN GESTION DU SLIDER --!>

#contentimage1 { background-image="http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg"; width:100%; height:auto;}




Configuration: Windows 7 / Chrome 43.0.2357.134

Pitet · Answer

Salut, Une solution possible :

texte 1

texte 2

texte 3

/* CSS */ #slider { width: 100%; text-align:center; overflow: hidden; } #slider .slides { position: relative; width: 500%; margin: 0; padding: 0; left: 0; text-align: left; font-size: 0; animation: 30s slidy infinite; } #slider .slides .slide { display: inline-block; width: 20%; height: 100px; background-size: cover; font-size: 14px; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } Quelques remarques : - remplacement de la balise figure qui n'était pas correctement utilisée - remplacement des balises img par une balise div en affichant l'image en fond de la div et permettant ainsi d'écrire du texte sur l'image - factorisation et corrections du css Bonne journée

ogthrod · Answer

Salut,
je me permet une question sur le sujet:

N'est ce pas plus lourd(à exécuter) l'animation en tout CSS plutôt qu'avec un peu de javascript(en tout cas pour un défilement d'images simple).
 C'est vrai que sans interactivité ni contenu dynamique c'est une bonne alternative à Flash pour les animations mais quand j'ai plus d'une animation CSS sur ma page avec un netbook le navigateur frise puis plante.

Sur la plupart des sites sur l'animation CSS il est souvent indiqué de ne pas utiliser de trop nombreuses animations et que certaines transformations en particulier posent problèmes.

Quels sont vos avis sur ces performances(qui s'amélioreront le temps que tous les navigateurs soit plus optimisés aux normes HTML5 et au CSS3)?

Du texte sur mon image! :(

2 réponses

Discussions similaires