28172 sujets

CSS et mise en forme, CSS3

Faire apparaitre texte sur image

Bonjour à tous !

Je reviens avec un nouveau problème.. Ça fait quelques jours que je suis dessus, et je ne m'en sors vraiment pas! Smiley decu

J'ai crée une bannière avec plusieurs petites images dedans, et je souhaiterais que lorsque je passe ma souris dessus, qu'elle devienne un peu plus transparente pour faire apparaitre le titre de l'entreprise.

J'ai tenté avec un Hover, mais ça ne marche pas, et je ne comprends pas pourquoi .. :euh:

Voici mon code html :

<div id="content-slider2">
                    <div id="slider2">
                        <div id="conteneur2">
                                        <div class="elem1"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP1.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem2"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP2.jpg" alt="Cougar"  width="130"/></div></div>
                                        <div class="elem3"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP3.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem4"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP4.jpg" alt="Cougar"  width="130"/></div></div>
                                        <div class="elem5"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP5.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem6"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP6.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem7"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP7.jpg" alt="Cougar"  width="130"/></div></div>
                                        <div class="elem8"><div class="rotateInDownLeft"><img class="photo2" src="images/EnginsTP/TP8.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem9"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP9.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem10"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP10.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem11"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP11.jpg" alt="Cougar" width="130" /></div></div>
                                        <div class="elem12"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP12.jpg" alt="Cougar"  width="130" height="100"/></div></div>
                                        <div class="elem13"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP13.jpg" alt="Cougar"  width="130"/></div></div>
                                        <div class="elem14"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP14.jpg" alt="Cougar"  width="130"/></div></div>
                                        <div class="elem15"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP15.jpg" alt="Cougar"  width="130"/></div></div>
                                        <div class="elem16"><div class="rotateInDownLeft"><img class="photo1" src="images/EnginsTP/TP5.jpg" alt="Cougar" width="130" /></div></div>
                                 
                        </div>       
                    </div>
            </div>    


.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rotateInDownLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
  @keyframes rotateInDownLeft {
  0% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
  }
 
 
 
#content-slider2 {
    height: 335px;
    width: 100%;
    border-radius: 10px;
    z-index:-10;
}
 
#slider2 {
    height: 200px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 80%;
    border-radius: 10px;
    margin-top: 3%;
    z-index: -1;
}


Merci pour votre aide, bonne journée ! Smiley biggrin
Je vais essayer d'aider.

Dans la div 'rotateDownLeft' il faut créer un span. La div sera en position relative et le span en absolue.

Par exemple

.rotateInDownLeft
{
position: relative; // pour positionner la span par rapport à la div
overflow: hidden; // pour cacher le contenu qui dépasse de la div
}

span
{
position: absolute;
top: -120px;
left:0;
}

.rotate:hover span{
top:0;
}
allan00958 a écrit :
J'ai oublié de préciser que le titre ou quelconque info sera dans la span

A ce compte, pourquoi ne pas mettre une figcaption ?!

Sans vouloir "pousser mémé dans les orties", j'opterais même pour utiliser figure comme conteneur.

A bon entendeur.
@Greg_Lumiere

Oui je connais les balises 'figure' et 'figcaption'. Par contre, je ne sais pas si on peut les utiliser dans le cadre d'un caroussel, vu qu'un caroussel (pour moi) c'est plus un 'widget', un outil qu'une lecture de page. Après je suis débutant, je n'ai pas forcément la bonne réponse....
Qu'est-ce qui t'empêche de donner une valeur sémantique aux éléments d'un carrousel ?

D'une vision plus générale :
Qu'est-ce qui empêche de rendre accessible un carrousel ?
Qu'est-ce qui fait que le code d'un carrousel est différent de tout autre code (en restant dans le même langage bien sûr) ?

Rien, rien et définitivement rien. Smiley langue


Edit : de manière stricte, un carrousel n'est pas un widget. Tout comme un menu, un encart etc...

Edit le 24/06/16:
Widget or not Widget ?
Alors il semblerait, si j'ai bien traduit les dires du W3, qu'en fait un widget représente tout ensemble qui répond à une ou plusieurs fonctions.
Comme par exemple un menu, un carrousel, un encart, une table etc etc
Cette définition ne correspond pas tout à fait à la définition que nous en faisons dans le langage courant. Nous le traduisons par "gadget" et c'est ce qui nous pousse vers le quiproquo.
Donc, déductivement, on peut presque dire que pour le W3, coder en html revient à faire de l'assemblage de widget.
Modifié par Greg_Lumiere (24 Jun 2016 - 12:57)
Bonjour tout le monde,

D'abord merci d'avoir répondu. J'ai tenté vos idées, en vain.. Mais bon du coup je pense que je vais faire autrement ..

Auriez-vous une idée pour qu'une div suit la scroll barre ? Car j'ai essayé ceci :

.flotter {
position : fixed;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
position : expression("absolute");
width : expression("100%");
top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight);
left : expression("0px");
}

même en changeant top, et tout, ça donne un rendu très laid, et la div disparait
Je suis débutant, je vais essayer de faire au mieux.

Il y a des expressions CSS que je n'ai jamais rencontré, comme les 4 dernières.

Ce cera pas facile de vous aider sans le le contexte. Peut-être crééer un jsfiddle (https://jsfiddle.net/)

Selon moi, cela suffit pour fixer un div:

div {
position : fixed;
top: 0px;
left: 0px;
width: 100%;
}


Utiliser le button 'code' dans l'éditeur pour poster du code, ça aide à la lecture.

Si le div passe par dessus d'autres éléments lors du défilement, peut-être rajouter un z-index: 10; par exemple, pour qu'il prenne le dessus.
Sujet clos
Aller à