Image avec un effet slide dessus

[Plümpheit]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://l-obscure-clarte.forumactif.com/

Description du problème

Bonjour, ou plutôt bonsoir

Je voudrais faire une modification d'une partie des images de ma PA. Je souhaitais que lorsque je passe mon curseur sur l'une d'elle, cette dernière "se décale" pour faire apparaître un texte dessous. Mais je sais pas du tout comment faire

Un petit coup de main serait le bienvenu ^^"

[Neptunia]

Bonjour ^^


Problème avec le code de ma PA

Ne touchez à rien, le lien mène directement sur le bon message !
MlleAlys détaille étape par étape comment faire !

[Plümpheit]

Neptunia, vous tombez toujours à point! Merci.

Je clos le sujet et j'essaye le tuto de cette chère MlleAlys!

Encore merci ^^

EDIT: j'ai venu la peau de l'ours un peu trop vite! J'ai juste un petit soucis je n'arrive pas mettre les images côte à côte. Elles se mettent directement les unes en dessous des autres

Et voici les codes HTML pour commencer :

Code:


<div class="alicecaglisse">
    <img src="http://www.aht.li/2838007/7575.png" class="alicecaglisse-img" />
   <div class="texteglisse">
      Pouet tralal
   </div>
</div>

Et CSS:

Code:

.alicecaglisse{
position: relative;
 overflow: hidden;
  width: 75px;
  height: 75px;
}

.alicecaglisse-img{
position: absolute;
top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
transition: top 0.5s ease-out;
}

.alicecaglisse:hover .alicecaglisse-img{
  top:-100%;
}


.texteglisse{
  font-size: 10px;
  color: black;
}


(et oui je sais... j'étais pas inspirée pour le titre de la classe XD j'ai mis ce qui me passais pas la tête LOL)

[Plümpheit]

je up, car j'ai clos trop vite ^^, j'ai encore un petit soucis! héhéhé

c'est ça que de placer la charrue avant les bœufs XD

[Neptunia]

En fait c'est plus un problème d'image coulissante mais de positionnement des éléments.

Une div comporte d'office un saut de ligne avant et un autre après
Eléments de type Bloc - Mozilla Developer Network

Donc si on en place plusieurs de suite sans rien préciser, elles se placeront verticalement (contrairement aux éléments "en ligne" qui se positionnent en ligne, donc les uns à côté des autres.

Soit on change le flacon (et on garde l'ivresse) soit on positionne chaque élément. La solution de facilité serait de faire un tableau et de placer chaque div dans une cellule. J'ai voulu tenter autre chose sans faire de tableau

J'ai ajouté un autre cadre autour de l'ensemble :

Code:

<div class="flacon" style="width:170px;height:75px">
<div class="alicecaglisse" style="float:left">
    <img src="http://www.aht.li/2838007/7575.png" class="alicecaglisse-img" />
  <div class="texteglisse">
      Pouet tralal
  </div>
</div>
<div class="alicecaglisse" style="float:right">
    <img src="http://www.aht.li/2838007/7575.png" class="alicecaglisse-img" />
  <div class="texteglisse">
      Pouet tralal
  </div>
</div>
</div>

et ajouté un style à chacune des div alicecaglisse. L'une flotte à gauche, l'autre à droite.
Quant au flacon je lui ai attribué une largeur plus grande que la somme des deux contenus, afin de créer un espace entre les deux images.

Le résultat -> https://jsfiddle.net/oqdwgcjr/

---

Et désolée, je n'avais pas vu votre edit.

[Plümpheit]

Merci, je verrais ça ce weekend ^^ J'ai repris le travail et j'ai donc moins le temps ^^"

Je vous tiens au courant

[Plümpheit]

Je up le sujet, non pas parce que j'attend une réponse, mais j'ai été malade et j'ai rien pu avancé. Je reviens vers vous ce weekend ^^

[Plümpheit]

Je re up pour les même raisons Promis je m'en occupe très vite ^^

[Plümpheit]

Désolée du retard. J'ai été prise de migraine pendant 3 semaines. Une vraie horreur. Et les maux de crâne n'aident pas à coder je vous l'assure! Bref

J'ai (enfin) ré-étudier votre dernière réponse Neptunia. En fait si je comprends bien, il faudrait que je créer un bloc pour y mettre mes images, ou créer un tableau qui aura ce même effet, pour éviter que mes images se mettent les unes sous les autres ?

Sinon je tiens à vous remercier et aussi vous dire que vos réponses sont toujours très compréhensibles. Et j'ai bien apprécié la petite touche d'humour

Donc moi j'ai ce bloc : (issu d'ailleurs d'un site que vous m'avez passé ^^ )

Code:

<!--        4 PREDEFINIS        -->     
      <div class="pfPOK">
                    
         <!--        I        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        II        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        III        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        IV        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        TITRE        --><span><strong>Prédéfinis</strong> à l'honneur</span>     
         <!--        V        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        VI        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        VII        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        VIII        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>    <br />
         <!--        IX        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        X        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        XI        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>     
         <!--        XII        --><a href="" target="_blank"><img src="http://www.aht.li/2838007/7575.png" /></a>   
      </div>

et le CSS lié à lui :

Code:

/* PREDEFINIS */
.pfPOK {
position:absolute; margin-top:250px; margin-left:200px;
width:550px; height:85px; text-align:left;
}
.pfPOK img{
margin:5px; width:75px; height:75px; border-radius:5px;
}
.pfPOK b{
display:block; font-weight:normal; font-size:42px;
}
.pfPOK span{
display:inline-block; vertical-align:top; margin-left:350px; padding-top:-15px; margin-top:-70px;
font-family:"Morpheus"; font-size:25px; text-transform:uppercase; text-align:center; line-height:30px;
color:black;letter-spacing: -0.1em;
}

Qu'est ce que je peux changer au niveau du bloc pour arrivé à l'effet de alicecaglisse, pour garder l'effet actuelle ?

Ou bien c'est mort et je crée un tableau ?

[Plümpheit]

up ?

[Plümpheit]

up ?

[Plümpheit]

up ^^

EDIT: c'est bon je me suis dérouillée avec les indications que j'avais déja